body{ background-color: #ffffff; } div.vizit-box.vb-panel{ border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } div.vizit-box.vb-panel div.vizit-box-head{ border-bottom: 1px solid; border-color: #ddd; border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; background-color: #022c42; color: #ffffff; font-size: 16px; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 10px 15px; } div.vb-page-content div.goods-view-content div.goods-properties span.h2, div.vb-page-content div.goods-view-content div.tab-pane h2:first-child{ font-weight: 400; margin-top: -10px; padding: 9px 10px; line-height: 24px; margin-right: -11px; margin-left: -11px; font-size: 16px; background-color: #022c42; color: #ffffff } div.vizit-box.vb-panel div.vizit-box-head a{ color: #ffffff; font-size: 16px; text-decoration: underline; } div.vizit-box.vb-panel div.vizit-box-head a:hover{ text-decoration: none; } div.vizit-box.vb-panel div.vizit-box-footer{ border-bottom: 1px solid; border-color: #dddddd; color: #333333; font-size: 13px; background-color: #f5f5f5; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } div.vizit-box.vb-panel div.vizit-box-footer a, div.vizit-box.vb-panel div.vizit-box-footer span{ color: #333333; font-size: 13px; } div.vb-advantage div.vizit-box-footer{ color: #333333; font-size: 13px; background-color: #f5f5f5; } div.vb-advantage div.vizit-box-footer a, div.vb-advantage div.vizit-box-footer span{ color: #333333; font-size: 13px; } div.vizit-box.vb-panel div.vizit-box-boby{ padding: 15px; background-color: white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border: 1px solid #dddddd; border-top: none; } .fixed-social-btn{ background-color: rgba(2, 44, 66, 0.7); left: 0px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .fixed-top-btn{ background-color: rgba(2, 44, 66, 0.7); right: 0px; -webkit-border-top-left-radius: 20px; border-top-left-radius: 20px; } .fixed-cart-btn{ background-color: rgba(0, 0, 0, 0.7); right: 0px; -webkit-border-bottom-left-radius: 20px; border-bottom-left-radius: 20px; } .fixed-write-us-btn{ background-color: rgba(2, 44, 66, 0.7); left: 20px; } div.vizit-box.page-block-id-2314687 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314687 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2314688{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314689 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314689 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2314690{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314695{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314698 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314698 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2314699{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314703 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314703 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314703 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314703 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314703 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2314703 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2314704{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314708 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2314708 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2314709{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314713 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314713 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314713 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314713 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314713 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2314713 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2314714{ margin-bottom: 0px; } div.vizit-box.page-block-id-2314717 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314717 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314717 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314717 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314717 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2314717 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2314720 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314720 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2314720 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314720 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2314720 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2314720 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2314725{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334833 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334833 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334834{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334836{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334838 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334838 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334838 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334838 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334838 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334838 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2334845 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334845 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334846{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334848{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334850 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334850 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334850 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334850 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334850 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334850 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2334855 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334855 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334856{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334858{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334860 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334860 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334860 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334860 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334860 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334860 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2334866 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334866 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334867{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334869{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334871 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334871 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334871 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334871 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334871 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334871 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2334877 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334877 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334878{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334880{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334882 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334882 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334882 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334882 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334882 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334882 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2334897 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334897 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334898{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334900{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334902 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334902 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334902 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334902 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334902 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334902 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2334991 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2334991 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2334992{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334994{ margin-bottom: 0px; } div.vizit-box.page-block-id-2334996 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334996 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2334996 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334996 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2334996 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2334996 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2368247 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368247 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2368248{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368249{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368250 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2368250 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2368250 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2368250 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2368250 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2368250 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2368352{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368410{ margin-bottom: 0px; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-block-title{ color: #ffffff; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-block-title a{ color: #ffffff; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-list div.avn-row .avn-item .title{ color: #022c42; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-list div.avn-row .avn-item .img span{ background-color: rgba(255, 255, 255, 0.5); } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-list div.avn-row .avn-item .des{ color: #022c42; } div.vizit-box.page-block-id-2368724{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368730{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368734{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368736{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368738{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368739{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368742{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368745{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368746{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368754 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.main-menu-cont{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu li.item ul.goods-category-list{ background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu li.item ul.goods-category-list li.it ul.sub-list{ background-color: #022c42; } @media (max-width: 767px) { div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu { background-color: #022c42; } } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu div.mobile-mm-phones { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu div.mobile-mm-search { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu { background-color: #022c42; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu li.item .menu-link{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu li.item .menu-link i{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu li.item ul.goods-category-list a{ color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu div.toggle-menu span.hamburger { background-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu div.toggle-menu { border-color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 div.mobile-menu div.mobile-mm-phones a { color: #FFFFFF; } div.vb-main-menu.main-menu-horizontal.page-block-id-2368754 ul.main-menu{ text-align: center; } div.vizit-box.page-block-id-2368755{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368756{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368757 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2368757 div.vb-cont { background-color: #022c42; } div.vb-footer.vb-footer-3.page-block-id-2368757 div.vb-cont .text-style{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2368757 div.vb-cont .text-style a{ color: #FFFFFF; } div.vb-footer.vb-footer-3.page-block-id-2368757 div.f-cols div.fc-head{ background-color: #114159; } div.vb-footer.vb-footer-3.page-block-id-2368757 div.f-cols div.fc-head:after{ background-color: #114159; } div.vizit-box.page-block-id-2368758{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368762{ margin-bottom: 0px; } div.vizit-box.page-block-id-2368812 div.vb-cont .vizit-box-boby{ background-color: #022c42; } div.vizit-box.page-block-id-2368875{ margin-bottom: 0px; } /* Основні стилі */ body { font-family: 'Open Sans', 'Roboto', 'Arial', sans-serif; /* Вибери шрифт, який найбільше підходить */ background-color: #f4f4f4; /* Світло-сірий фон */ color: #022c42; /* Темно-синій текст */ margin: 0; padding: 0; font-size: 16px; line-height: 1.5; } /* Заголовки */ h1, h2, h3, h4 { color: #022c42; /* Темно-синій для заголовків */ font-weight: bold; } /* Кнопки */ .button { background-color: #007bff; /* Синя кнопка */ color: #ffffff; /* Білий текст на кнопці */ border: none; border-radius: 20px; /* Округлені кути */ padding: 10px 20px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; /* Анімація при наведенні */ } /* Ефект при наведенні на кнопку */ .button:hover { background-color: #0056b3; /* Темніший синій при наведенні */ transform: scale(1.05); /* Збільшення при наведенні */ } /* Адаптивність */ @media (min-width: 768px) { .container { max-width: 1200px; /* Максимальна ширина для десктопів */ margin: 0 auto; /* Центрування контейнера */ } } /* Заголовок і введення даних */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-2 .inp-group input { background: rgba(0, 0, 0, 0.34); color: #ffffff; font-weight: bold; border: none; padding: 10px 15px; /* Трохи збільшене паддінг для зручності */ border-radius: 20px; /* Округлені кути */ transition: background 0.3s ease; } div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-2 .inp-group input:hover { background: rgba(0, 123, 255, 0.5); /* Напівпрозорий світло-синій колір при наведенні */ } /* Фон заголовка */ div.vb-header.vb-header-3 div.vb-cont .header-3-bg-cont { background-color: rgba(0, 0, 0, 0.43); padding: 20px; /* Збільшене паддінг для більшого простору */ border-radius: 8px; } /* Декоративний елемент заголовка */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-head:after { background-color: #022c42 !important; height: 3px; display: block; content: ""; margin-top: 10px; } /* Підвал */ div.vb-footer.vb-footer-5 div.fc-schedule:after, div.vb-footer.vb-footer-5 div.fc-schedule:before { display: none; } div.vb-footer.vb-footer-5 div.vb-cont { background-color: rgba(0, 0, 0, 0.75) !important; /* Чорний з меншою прозорістю */ padding: 20px; color: #ffffff; border-radius: 8px; /* Округлені кути для підвалу */ } /* Коробка опису продукту */ div.vizit-box.vb-panel div.vizit-box-boby { border: 1px solid transparent; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px; /* Збільшене паддінг для вмісту */ background-color: #ffffff; transition: box-shadow 0.3s ease; } /* Тіні і шрифти */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-cont, div.vb-header.vb-header-3 div.about-firm { font-weight: bold; text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.7); color: #007bff; /* Світло-синій колір */ } /* Панель налаштувань */ #vizit-setting-panel { height: auto; padding: 15px; /* Збільшене паддінг для зручності */ position: fixed; top: 20px; right: 20px; background-color: #ffffff; border-radius: 8px; /* Округлені кути для панелі */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Стилі для пошукової форми на ПК */ @media (min-width: 768px) { /* Форма вводу для пошуку товарів */ .inp-group { display: flex; align-items: center; width: 100%; max-width: 400px; background-color: #ffffff; border-radius: 20px; padding: 5px 10px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease; } /* Поле вводу в формі пошуку */ .inp-group input[type="text"] { width: 100%; border: none !important; /* Видалено обводку */ outline: none !important; /* Видалено outline */ padding: 10px; font-size: 14px; border-radius: 20px; color: #022c42; /* Темно-синій текст */ font-family: 'Roboto Condensed', sans-serif; } /* Кнопка пошуку */ .glyphicon.glyphicon-search { background-color: #007bff; /* Основний синій */ color: #ffffff; border: none !important; /* Видалено обводку */ outline: none !important; /* Видалено outline */ padding: 10px 15px; margin-left: 5px; font-size: 16px; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s; display: flex; align-items: center; justify-content: center; } /* Hover ефект для кнопки пошуку */ .glyphicon.glyphicon-search:hover { background-color: #0056b3; /* Темніший синій при наведенні */ transform: scale(1.1); /* Легка трансформація */ } /* Акцент при фокусі на пошуковому полі */ .inp-group input[type="text"]:focus { box-shadow: 0px 2px 8px rgba(0, 123, 255, 0.4); /* Додатковий акцент при фокусі */ border: none !important; /* Видалено обводку */ outline: none !important; /* Видалено outline */ } } /* Стилі для портальної панелі тільки для ПК */ @media (min-width: 768px) { /* Панель над шапкою сайту */ .portal-top-panel { box-sizing: border-box; /* Включає відступи у загальну ширину */ position: absolute; /* Використовуємо absolute для фіксації на місці */ top: 0; /* Прив'язуємо до верхньої частини контейнера */ left: 0; /* Прив'язуємо до лівого краю */ width: 100%; /* Фіксована ширина */ background-color: #022c42; /* Темно-синій колір */ padding: 5px 15px; /* Відступи */ display: flex; align-items: center; justify-content: flex-end; /* Вирівнювання кнопок праворуч */ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); /* Легка тінь для розділення */ z-index: 1000; /* Зробити панель видимою над іншими елементами */ margin: 0 auto; /* Центруємо панель */ overflow: visible; /* Вирішення проблеми з видимістю */ } /* Стилі для кнопок на панелі */ .portal-top-panel .btn-info { background-color: #007bff; /* Основний синій колір кнопок */ color: #ffffff; border: none; border-radius: 4px; padding: 3px 8px; /* Зменшені відступи */ font-size: 11px; /* Трохи менший розмір шрифту */ cursor: pointer; transition: background-color 0.3s ease; margin-left: 4px; /* Відступ між кнопками */ } /* Hover-ефект */ .portal-top-panel .btn-info:hover { background-color: #0056b3; /* Темніший синій при наведенні */ } /* Активна кнопка */ .portal-top-panel .btn-info.active { background-color: #ffcc00; /* Жовтий для активної кнопки */ color: #022c42; } /* Додатковий стиль для кнопки авторизації */ .portal-top-panel .top-link-login { background-color: #ff8c00; /* Помаранчевий для виділення */ margin-right: 70px; } } /* Прибираємо панель з мобільної версії сайту */ @media (max-width: 767px) { #portal-top-panel-place { display: none; } } /* -----преимущества----- */ #vizit-template.vizit-template-1 div.page-width-limiter { min-width: 250px; } div.vb-advantage.vb-advantage-4 div.avn-block-title { margin-bottom: 0px; color: #022c42 !important; } div.vb-advantage.vb-advantage-4 div.avn-list { padding: 0px; } div.vb-advantage.vb-advantage-4 div.avn-list div.avn-row .avn-item .avn-shadow { background-color: rgba(0,0,0,0.5); } /*-----убираем черный бордюр над блоком------*/ div.vizit-box.vb-panel.vb-page-content div.vizit-box-boby { border-top: none; } @media (max-width: 768px) { div.vizit-box.vb-panel.vb-page-content div.vizit-box-boby { margin-top: 5px; margin-bottom: 5px; } } /* -----меню категорий----- */ /* Список категорій */ div.vb-category-menu ul.category-list { list-style: none; margin: 0; padding: 0; margin-top: -15px; margin-bottom: -17px; } /* Стиль для елементів меню */ div.vb-category-menu ul.category-list li.item { background-color: #022c42; padding: 0; margin: 1px -16px; position: relative; background-size: 200.22% auto; background-position: 0% 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #525279 50%); transition: background-position 0.6s ease-out; } /* Ховер-ефект для елементів меню */ div.vb-category-menu ul.category-list li.item:hover { background-position: -99.99% 0; transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Стиль для поточного елемента */ div.vb-category-menu ul.category-list li.item.current, div.vb-category-menu ul.category-list ul.sub-list li.sub-item.current { background-color: #525279; } /* Стили для іконки в елементах меню */ div.vb-category-menu ul.category-list li.item div { padding-left: 0; } div.vb-category-menu ul.category-list li.item div i { position: absolute; left: 95%; top: 40%; font-size: 10px; color: white; transition-duration: 0.3s; } /* При ховері, іконка стає непрозорою */ div.vb-category-menu ul.category-list li.item:hover div i { opacity: 0; } /* Стиль для підменю */ div.vb-category-menu ul.category-list ul.sub-list li.sub-item { background: #022c42; position: relative; margin: 0; background-size: 200.22% auto; background-position: 0% 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #525279 50%); transition: background-position 0.6s ease-out; } /* Ховер-ефект для підменю */ div.vb-category-menu ul.category-list ul.sub-list li.sub-item:hover { background-position: -99.99% 0; transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Відображення підменю */ div.vb-category-menu ul.category-list li.item.opened ul.sub-list { display: block; background-color: white; } /* Стиль для активних посилань */ div.vb-category-menu ul.category-list li.item.current div a, div.vb-category-menu ul.category-list li.sub-item.current a, div.vb-category-menu ul.category-list li.item.current div i { font-weight: normal; color: #fff; } /* Стиль для посилань в меню */ div.vb-category-menu ul.category-list a { font-size: 14px; color: #fff; display: block; padding: 5px 10px; z-index: 2; transition-duration: 0.6s; } /* Стиль для посилань у підменю */ div.vb-category-menu ul.category-list li.item ul.sub-list a { padding: 5px 10px; } /* Ховер-ефект для посилань */ div.vb-category-menu ul.category-list a:hover { text-decoration: none; color: #fff; } /* Стиль для підменю */ div.vb-category-menu ul.category-list li.item ul.sub-list { position: absolute; background-color: inherit; z-index: 900; width: 250px; top: -7px; padding: 0; left: 250px; opacity: 0; visibility: hidden !important; transform: translate3d(50px, 0, 0); transition: transform 0.6s, opacity 0.6s, visibility 0.6s; box-shadow: 0px 0px 32px -10px rgba(0, 0, 0, 0.75); } /* Показати підменю при ховері */ div.vb-category-menu ul.category-list li.item:hover ul.sub-list { opacity: 1; visibility: visible !important; transition-delay: 0s; transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Анімація іконки для відкритого елемента */ div.vb-category-menu ul.category-list li.item.opened div i { transform: rotate(0deg); } /* ======================================== Стилі для головного меню ======================================== */ /* Стилі для головного меню (тільки для ПК) */ @media (min-width: 768px) { .vb-main-menu { background-color: #022c42; /* Основний темно-синій колір */ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); /* Легка тінь */ } /* Головне меню горизонтально */ .main-menu-horizontal { display: flex; justify-content: center; /* Вирівнюємо пункти меню по центру */ padding: 10px 15px; /* Внутрішні відступи */ } /* Пункти меню */ .main-menu-horizontal ul.main-menu { display: flex; list-style: none; /* Список без маркерів */ padding: 0; margin: 0; } /* Кожен пункт меню */ .main-menu-horizontal ul.main-menu li { margin: 0 10px; /* Відступи між пунктами меню */ position: relative; } /* Посилання в меню */ .main-menu-horizontal ul.main-menu li a { color: #ffffff; /* Білий текст */ text-transform: uppercase; /* Верхній регістр */ font-size: 18px; /* Розмір шрифту */ padding: 10px 15px; /* Внутрішні відступи */ border-radius: 5px; /* Округлені кути */ position: relative; transition: all 0.3s ease; } /* Ховер-ефект для пунктів меню */ .main-menu-horizontal ul.main-menu li a:hover { transform: scale(1.05); } /* Підкатегорії */ .main-menu-horizontal ul.main-menu li ul { display: none; position: absolute; background-color: #f4f4f4; border-radius: 5px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); margin-top: 10px; z-index: 1000; } /* Показати підкатегорії при наведенні */ .main-menu-horizontal ul.main-menu li:hover ul { display: block; } /* Посилання в підкатегоріях */ .main-menu-horizontal ul.main-menu li ul li a { font-size: 14px; padding: 8px 12px; color: #f4f4f4; /* Темний текст для підкатегорій */ } /* Виділення для активного пункту */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item.current .menu-link { position: relative; /* Для розташування псевдоелемента */ color: #ffffff; /* Білий текст для активної кнопки */ font-weight: bold; /* Жирне накреслення для виділення */ background-color: rgba(0, 123, 255, 0.55); /* Напівпрозорий фон */ border-radius: 5px; /* Округлені кути */ padding: 7px 10px; } /* Розмір шрифту підкатегорій */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item ul.goods-category-list a { color: #FFFFFF; font-size: 14px; } /* Розмір підменю (1) */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item ul.goods-category-list { background-color: #022c42; width: 220px; } /* Розмір підменю (2) */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item ul.goods-category-list li.it ul.sub-list { background-color: #022c42; width: 270px; } /* Розмір кнопки (2) */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item ul.goods-category-list li.it ul.sub-list > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .5); display: block; width: 260px; } } /* Прибираємо пункт "Головна" */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item:last-child { display: none; } /* Колір тексту для активного меню */ div.vb-main-menu.main-menu-horizontal ul.main-menu li.item ul.goods-category-list li > span, div.vb-main-menu.main-menu-horizontal ul.main-menu li.item ul.goods-category-list li > a { display: flex; justify-content: space-between; width: 100%; padding: 5px 10px 5px 15px; text-align: left; font-weight: 400; color: #46b8da; } /* Шапка блоку */ .vb-cont { position: relative; } /* Стиль шапки блоку */ div.vizit-box.vb-panel div.vizit-box-head { position: relative; margin-top: 10px; border: none; font-family: 'Roboto Condensed Bold', Roboto, Arial; background-color: #022c42; color: #ffffff; /* Білий текст для контрасту */ text-align: center; padding: 8px 20px; /* Збільшений padding для кращої видимості */ margin-bottom: 15px; font-weight: 700; text-transform: uppercase; border-radius: 8px; /* Округлі кути */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Додаємо тінь */ overflow: hidden; } /* Медіа запит для мобільних пристроїв */ @media (max-width: 768px) { div.vizit-box.vb-panel div.vizit-box-head { padding: 6px 10px; /* Зменшуємо padding */ font-size: 16px; /* Менший розмір шрифту */ margin-bottom: 10px; /* Зменшуємо відступ знизу */ max-width: 90%; /* Максимальна ширина для мобільних пристроїв */ margin-left: auto; /* Вирівнюємо по центру */ margin-right: auto; /* Вирівнюємо по центру */ } } /* Стиль шапки сайту */ div.vb-header.vb-header-3 { display: flex; /* Використовуємо flexbox для розміщення елементів */ justify-content: space-between; /* Простір між елементами */ align-items: center; /* Центруємо по вертикалі */ background: linear-gradient(to right, #022c42, #007bff); /* Градієнтний фон */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Тінь для об’єму */ padding: 10px 20px; /* Паддінг для шапки */ } /* Загальні стилі для заголовків у шапці */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-head { margin-bottom: 15px; text-align: center; } div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-head span { font-size: 20px; text-align: center; font-family: 'Roboto Condensed Bold', 'Roboto', 'Arial'; text-transform: uppercase; color: #f0f0f0; /* Світліший відтінок для контрасту */ } /* Фон для заголовку */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-head:before { background-color: #022c42 !important; } /* Контент у шапці */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-cont { padding-left: 10px; line-height: 1.5; text-align: center; } div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3 div.cell-3-cont span { text-align: left !important; } /* Стиль кнопок */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-2 .inp-group button { right: 10px; top: 7px; transition: background-color 0.3s ease, transform 0.3s ease; /* Плавний перехід */ } /* Ефект при наведенні на кнопку */ div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-2 .inp-group button:hover { background-color: #007bff; /* Синій відтінок при наведенні */ transform: scale(1.05); /* Легке збільшення */ } /* Медійні запити для адаптації на мобільних */ @media (max-width: 767px) { div.vb-header.vb-header-3 div.vbh-table div.vbh-cell-3, div.vb-header.vb-header-3 .h3-down { display: none; /* Сховати елементи на мобільних */ } div.vb-header.vb-header-3 div.header-width-limiter { min-width: 320px; /* Мінімальна ширина для мобільних */ } } /* -----контакты----- */ div.vb-contact.vb-contact-3 .vb-cont .vizit-box-boby{ background-color: #013F68 !important; } div.vb-contact.vb-contact-3 div.contact-cont .c-contact{ padding: 3px 0px; font-size: 16px; font-weight: 700; } div.vb-contact.vb-contact-2 ul.contact li{ border-bottom: 1px solid #ccc !important; } div.vb-contact.vb-contact-2 ul.contact div.c-value:after{ position: absolute; content: ''; top: 0; right: 0; height: 100%; width: 30px; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 32%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 32%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 32%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); } div.vb-contact.vb-contact-2 ul.contact div.c-value:hover:after{ display: none; } div.vb-contact.vb-contact-2 ul.contact li { margin-bottom: 0px; padding-bottom: 0px; } div.vb-contact.vb-contact-2 ul.contact div.c-value{ position: relative; overflow-x: hidden; padding: 10px 10px; width: 100%; } div.vb-contact.vb-contact-2 ul.contact div.c-value:hover { overflow-x: visible; background-color: white; width: auto; } /* Корзина */ .fixed-cart-btn { background-color: rgba(2, 44, 66, 0.7); z-index: 1000; transition: background-color 0.3s ease; } /* Ефект при наведенні */ .fixed-cart-btn:hover { background-color: rgba(0, 150, 255, 0.7); /* Світліший синій відтінок */ animation: pulse 0.8s infinite; } /* Анімація пульсації */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); /* Легке збільшення */ } 100% { transform: scale(1); } } /* Кнопка вгору */ .fixed-top-btn { background-color: rgba(2, 44, 66, 0.7); transition: background-color 0.3s ease; } /* Ефект при наведенні */ .fixed-top-btn:hover { background-color: rgba(0, 123, 255, 0.7); /* Світліший синій відтінок */ } /*------футер------*/ /* Загальний стиль для футера */ .vb-footer.vb-footer-5 { background-color: #022c42 !important; color: #fff !important; } /* Стиль заголовків колонок */ .vb-footer.vb-footer-5 div.f-cols div.fc-head { font-family: 'Roboto Condensed Bold', Roboto, Arial; font-size: 22px !important; padding: 3px 15px !important; position: relative; z-index: 2; } /* Сховані псевдоелементи для колонок */ .vb-footer.vb-footer-5 div.f-cols .f-col-1 div.fc-head:after, .vb-footer.vb-footer-5 div.f-cols .f-col-3 div.fc-head:after { display: none; } /* Стиль для псевдоелементів колонок */ .vb-footer.vb-footer-5 div.f-cols .f-col-1 div.fc-head:before, .vb-footer.vb-footer-5 div.f-cols .f-col-3 div.fc-head:before, .vb-footer.vb-footer-5 div.f-cols .f-col-1 div.fc-head:after, .vb-footer.vb-footer-5 div.f-cols .f-col-3 div.fc-head:after { position: absolute; content: ''; width: 0; height: 0; border-style: solid; } /* Нижні кути для псевдоелементів */ .vb-footer.vb-footer-5 div.f-cols .f-col-1 div.fc-head:before, .vb-footer.vb-footer-5 div.f-cols .f-col-3 div.fc-head:before { bottom: 0; left: -10px; border-width: 0 10px 20px 0; border-color: transparent transparent transparent transparent; } /* Верхні кути для псевдоелементів */ .vb-footer.vb-footer-5 div.f-cols .f-col-1 div.fc-head:after, .vb-footer.vb-footer-5 div.f-cols .f-col-3 div.fc-head:after { top: 0; left: 100%; background-color: transparent; border-width: 20px 0 0 10px; border-color: transparent transparent transparent transparent; } /* Стиль для розкладу */ .vb-footer.vb-footer-5 div.fc-schedule { font-weight: 700; } /* Псевдоелементи для розкладу */ .vb-footer.vb-footer-5 div.fc-schedule:before, .vb-footer.vb-footer-5 div.fc-schedule:after { position: absolute; content: ''; width: 0; height: 0; border-style: solid; } /* Лівий псевдоелемент розкладу */ .vb-footer.vb-footer-5 div.fc-schedule:before { bottom: 0; left: -10px; border-width: 0 10px 20px 0; border-color: transparent #022c42 transparent transparent; } /* Правий псевдоелемент розкладу */ .vb-footer.vb-footer-5 div.fc-schedule:after { top: 0; right: -10px; border-width: 20px 0 0 10px; border-color: transparent transparent transparent #022c42; } /* Стиль тексту */ .vb-footer.vb-footer-5 .text-style { font-size: 15px; } /* Стиль посилань */ .vb-footer.vb-footer-5 .text-style a { margin-left: 15px; position: relative; transition: all 0.3s ease-in-out; } /* Ефект наведення на посилання */ .vb-footer.vb-footer-5 .text-style a:hover { color: #022c42 !important; text-decoration: none; } /* Псевдоелемент для посилань */ .vb-footer.vb-footer-5 .text-style a:before { content: ''; position: absolute; top: 8px; left: -15px; width: 5px; height: 5px; background: #ffffff; transition: all 0.3s ease-in-out; } /* Ефект при наведенні на псевдоелемент */ .vb-footer.vb-footer-5 .text-style a:hover:before { transform: translate3d(5px, 0, 0); } /* Стиль для поля пошуку */ .vb-footer.vb-footer-5 div.fc-search .inp-group input { font-size: 14px; display: block; border-radius: 0; padding: 5px 12px; background: white; border: 1px solid white; } /* Стиль для кнопки пошуку */ .vb-footer.vb-footer-5 div.fc-search .inp-group button { position: absolute; right: 8px; top: 4px; } /* ----- Форма вводу ----- */ .form-control { box-shadow: none; /* Прибираємо тінь */ background-color: #ffffff; /* Білий фон */ border-radius: 8px; /* Округлені кути */ padding: 10px 15px; /* Внутрішні відступи */ font-size: 14px; /* Розмір шрифту */ transition: border-color 0.1s, box-shadow 0.1s; /* Анімація переходів */ outline: none; /* Прибираємо обведення */ } /* Стиль при фокусі */ .form-control:focus { box-shadow: 0 0 5px rgba(2, 44, 66, 0.5); /* Темно-синя тінь при фокусі */ border-color: #007bff; /* Синя рамка при фокусі */ } /* Адаптація для мобільних пристроїв */ @media (max-width: 768px) { .form-control { padding: 8px 12px; /* Зменшення відступів */ font-size: 12px; /* Зменшений розмір шрифту */ border-radius: 6px; /* Менше округлення для компактного вигляду */ } .form-control:focus { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); /* Легка тінь при фокусі на мобільних */ } } /* Загальні стилі для всіх кнопок */ .btn { background-color: #022c42; /* Основний колір кнопок */ color: #ffffff; /* Білий текст */ border: none; /* Без рамки */ font-size: 16px; font-weight: 700; border-radius: 8px; /* Округлені кути */ padding: 10px 20px; /* Внутрішні відступи */ font-size: 14px; /* Розмір шрифту */ cursor: pointer; /* Змінює курсор на руку */ transition: background-color 0.3s, transform 0.2s; /* Анімації для фону і трансформації */ } /* Стиль для кнопок при наведенні */ .btn:hover { background-color: #007bff; /* Синій колір при наведенні */ transform: scale(1.05); /* Збільшення кнопки при наведенні */ } /* Стиль для кнопок в активному стані */ .btn:active { transform: scale(0.95); /* Зменшення кнопки при натисканні */ } /* Додаткові стилі для маленьких кнопок */ .btn-sm { font-size: 12px; /* Менший розмір шрифту */ padding: 8px 16px; /* Менші внутрішні відступи */ } /* Додаткові стилі для великих кнопок */ .btn-lg { font-size: 16px; /* Більший розмір шрифту */ padding: 12px 24px; /* Більші внутрішні відступи */ } /* Адаптація стилів для мобільних пристроїв */ @media (max-width: 768px) { .btn { padding: 8px 16px; /* Зменшені внутрішні відступи на мобільних */ font-size: 12px; /* Зменшений розмір шрифту */ border-radius: 6px; /* Менше округлення для кнопок */ } /* Стилі для маленьких кнопок на мобільних */ .btn-sm { font-size: 10px; /* Менший розмір шрифту */ padding: 6px 12px; /* Зменшені внутрішні відступи */ } /* Стилі для великих кнопок на мобільних */ .btn-lg { font-size: 14px; /* Розмір шрифту адаптований для великих кнопок */ padding: 10px 20px; /* Адаптовані внутрішні відступи */ } } /* -----кнопка блока----- */ /* Стиль для футера візиту */ .vizit-box.vb-panel div.vizit-box-footer { background-color: rgba(0, 0, 139, 0.7) !important; } /* Стиль для тексту та посилань у футері */ .vizit-box.vb-panel div.vizit-box-footer span, .vizit-box.vb-panel div.vizit-box-footer a { color: #fff; font-weight: 700; transition: color 0.3s; /* Додано перехід кольору */ } /* Стиль для іконок у футері */ .vizit-box.vb-panel div.vizit-box-footer i { margin-left: 7px; transition: transform 0.3s; /* Додано перехід для трансформації */ } /* Ефект при наведенні на футер */ .vizit-box.vb-panel div.vizit-box-footer:hover i { transform: translate3d(5px, 0, 0); } /*------написать нам-------*/ /* Стиль для кнопки "Напишіть нам" */ .fixed-write-us-btn { border-radius: 50%; /* Зміна на 50% для кола */ height: 65px; width: 65px; background-image: url(/static-files/img/firm-image-library/21604/mail-sent-5454-565398.png); background-size: 55%; background-repeat: no-repeat; background-position: center; box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1); /* Вилучені префікси */ background-color: rgba(2, 44, 66, 0.7); animation: pulse-grow 1s linear infinite alternate; /* Спрощений синтаксис анімації */ } /* Сховати іконки в кнопці */ .fixed-write-us-btn i { display: none; } /* Анімація для кнопки */ @keyframes pulse-grow { to { transform: scale(0.9); } } /* Сховати елементи фільтра та колонки в футері */ div.vb-page-content div.category-content div.brand-filter, div.vb-footer.vb-footer-3 div.f-cols .f-col-1 { display: none; } /* Загальний стиль для блоку категорій */ .a-vizit-category-list, .a-vizit-category-list-2 { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 15px; gap: 10px; /* Проміжок між категоріями */ } /* Сама картка категорії */ .avc-item { background-color: #f5f5f5; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; width: 100%; max-width: 150px; /* Максимальна ширина картки */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Контейнер вмісту картки */ .avc-item-cont { padding: 10px; text-align: center; } /* Ефект при наведенні на картку */ .avc-item:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); background-color: #e0f7fa; /* Легкий відтінок для виділення */ } /* Текст категорії */ .avc-item-cont h4 { font-size: 16px; color: #333; margin: 8px 0; font-weight: bold; text-transform: uppercase; } /* Приховуємо кількість товарів у категорії */ .avc-item .avc-item-cont .title-cont .count { font-size: 14px; display: none !important; /* Приховуємо кількість товарів */ } /* Стиль фону для заголовка категорії */ .a-vizit-category-list.a-vizit-category-list-2 .avc-item .title-cont { background-color: rgba(0, 0, 0, 0.5); /* Напівпрозорий чорний фон */ } /* Зміна непрозорості заголовка при наведенні */ .a-vizit-category-list.a-vizit-category-list-2 .avc-item:hover .title-cont { opacity: 0; /* Приховуємо заголовок при наведенні */ } /* Стиль для контейнера картки товару */ .avg-item-cont { border: 1px solid #e0e0e0; /* Світло-сірий бордер */ border-radius: 10px; /* Округлені кути */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тінь для об'єму */ overflow: hidden; /* Приховує переповнення */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Анімації */ } /* Ефект при наведенні на контейнер картки */ .avg-item-cont:hover { transform: translateY(-5px); /* Підйом картки при наведенні */ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Підсвітка тіні */ } /* Стиль для картки товару */ .avg-item { padding: 0px; /* Без внутрішнього відступу */ background-color: #ffffff; /* Білий фон для картки */ text-align: center; /* Вирівнювання тексту по центру */ } /* Заголовок товару */ .avg-item .title { font-size: 1.25rem; /* Розмір шрифту заголовка */ color: #022c42; /* Темно-синій */ margin: 10px 0; /* Відступи */ } /* Ціна товару */ .avg-item .price { font-size: 1.5rem; /* Розмір шрифту для ціни */ color: #022c42; /* Інший колір для ціни */ margin: 10px 0; /* Відступи */ } /* Позначки про наявність товару */ .avail { font-weight: bold; /* Жирний шрифт */ } .avail-1 { color: #28a745; /* Зелений колір для наявності */ } .avail-2 { color: #dc3545; /* Червоний колір для відсутності */ } /* Кнопка "Купити" */ .cart-button-typ-small-block.btn-success { background-color: #022c42; /* Темно-синій колір кнопки */ color: #ffffff; /* Білий текст */ border: none; /* Без бордера */ border-radius: 5px; /* Округлені кути */ padding: 10px; /* Внутрішній відступ */ transition: background-color 0.3s ease, transform 0.1s ease; /* Анімація */ font-weight: bold; /* Жирний шрифт */ } /* Ефект при наведенні на кнопку "Купити" */ .cart-button-typ-small-block.btn-success:hover { background-color: #007bff; /* Темніший синій при наведенні */ } /* Ефект при натисканні на кнопку "Купити" */ .cart-button-typ-small-block.btn-success:active { transform: scale(0.95); /* Зменшення при натисканні */ } /* Кнопка "Товар у корзині" */ .cart-button-typ-small-block.btn-warning { background-color: #022c42; /* Жовтий колір кнопки */ color: #ffffff; /* Білий текст */ border: none; /* Без бордера */ border-radius: 5px; /* Округлені кути */ padding: 10px; /* Внутрішній відступ */ transition: background-color 0.3s ease, transform 0.1s ease; /* Анімація */ font-weight: bold; /* Жирний шрифт */ } /* Ефект при наведенні на кнопку "Товар у корзині" */ .cart-button-typ-small-block.btn-warning:hover { background-color: #e0a800; /* Темніший жовтий при наведенні */ } /* Ефект при натисканні на кнопку "Товар у корзині" */ .cart-button-typ-small-block.btn-warning:active { transform: scale(0.95); /* Зменшення при натисканні */ } /* Загальний стиль для блоку фільтрів */ .firm-filter-list { /* Простий стиль без додаткових ефектів */ } /* Стиль для кожного фільтра */ .item.item-filter { margin-bottom: 15px; /* Відступи між фільтрами */ } /* Стиль для заголовка фільтра з рискою */ .item.item-filter .head { font-size: 1.2rem; /* Розмір шрифту для назви */ font-weight: bold; /* Жирний шрифт */ color: #022c42; /* Темно-синій колір для заголовка */ padding: 5px 0; /* Внутрішній відступ */ position: relative; /* Для розміщення риски */ } .item.item-filter .head::after { content: ""; /* Порожній контент для риски */ display: block; width: 100%; /* Розмір по ширині заголовка */ height: 1px; /* Товщина риски */ background-color: #022c42; /* Колір риски */ margin-top: 5px; /* Відступ зверху для риски */ } /* Загальний стиль для блоку хлібних крихт */ .vizit-box.vb-panel.vb-bread-crumbs.vb-bread-crumbs-1 { background-color: #ffffff; /* Білий фон для блоку */ padding: 0px 0px; /* Внутрішні відступи */ border-radius: 8px; /* Округлені кути */ } /* Унікальний стиль для контейнера хлібних крихт */ .vizit-box.vb-panel.vb-bread-crumbs.vb-bread-crumbs-1 .vizit-box-boby { border-radius: 8px; margin-top: 5px; } /* Стиль для самих хлібних крихт */ .bread-crumbs { display: flex; /* Використання Flexbox для горизонтального вирівнювання */ align-items: center; /* Центрування по вертикалі */ font-size: 0.9rem; /* Розмір шрифту для хлібних крихт */ color: #022c42; /* Темно-синій колір тексту */ flex-wrap: wrap; /* Дозволяємо переносити рядки на новий рівень */ } /* Стиль для елементів хлібних крихт */ .bread-crumbs-item { display: flex; /* Використання Flexbox для елементів */ align-items: center; /* Центрування по вертикалі */ margin-right: 10px; /* Відступи між елементами */ white-space: nowrap; /* Уникнення переносу тексту всередині елементів */ } /* Стиль для значка будинку */ .bread-crumbs-item .fa.fa-home { margin-right: 5px; /* Відступ між значком і текстом */ } /* Стиль для стрілок між сторінками */ .bread-crumbs-sep { margin: 0 5px; /* Відступи для стрілок */ color: #007bff; } /* Ефект при наведенні на елементи */ .bread-crumbs-item:hover { text-decoration: underline; /* Підкреслення тексту при наведенні */ color: #007bff; /* Зміна кольору при наведенні */ } /* Адаптивний дизайн */ @media (max-width: 768px) { .vizit-box.vb-panel.vb-bread-crumbs.vb-bread-crumbs-1 { margin: 3px 0; /* Зовнішній відступ зверху і знизу для мобільних */ } .bread-crumbs { font-size: 0.8rem; /* Зменшити розмір шрифту на мобільних */ justify-content: flex-start; /* Вирівнювання по лівому краю */ } .bread-crumbs-item { margin-right: 5px; /* Зменшити відступи між елементами на мобільних */ } } /* Риска під назвою групи */ .vizit-box.vb-panel.vb-page-content .col-sm-7 { position: relative; /* Встановлюємо відносне позиціонування для дочірніх елементів */ padding-bottom: 10px; /* Внутрішній відступ для відстані між текстом і рискою */ } /* Стиль для заголовків */ .vizit-box.vb-panel.vb-page-content .col-sm-7 h1, .vizit-box.vb-panel.vb-page-content .col-sm-7 h2, .vizit-box.vb-panel.vb-page-content .col-sm-7 h3 { margin: 0; /* Знімаємо стандартні відступи */ color: #022c42; /* Темно-синій колір тексту */ position: relative; /* Додаємо позиціонування, щоб рисочка відносилась до заголовка */ } /* Стиль для риски під заголовком */ .vizit-box.vb-panel.vb-page-content .col-sm-7 h1::after, .vizit-box.vb-panel.vb-page-content .col-sm-7 h2::after, .vizit-box.vb-panel.vb-page-content .col-sm-7 h3::after { content: ""; /* Псевдоелемент без тексту */ display: block; /* Змінюємо на блочний елемент */ width: 100%; /* Задаємо ширину риски, 100% від ширини заголовка */ height: 4px; /* Висота риски */ background-color: #022c42; /* Колір риски */ border-radius: 4px; /* Округлені краї */ position: absolute; /* Абсолютне позиціонування */ bottom: -6px; /* Відстань між заголовком та рискою */ } /* Стиль шапки з лініями лише для мобільних пристроїв */ @media (max-width: 768px) { .vizit-box.vb-header.vb-header-2 { background-color: #ffffff; /* Білий фон шапки */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Легка тінь для об’єму */ } } @media (max-width: 768px) { /* Загальні стилі для кнопки тільки на мобільних */ .top-link-login.btn.btn-info.btn-xs { background-color: #022c42; /* Темно-синій */ color: #ffffff; /* Білий текст */ border: none; /* Без рамки */ border-radius: 3px; /* Округлені кути */ padding: 4px 8px; /* Компактні відступи */ font-size: 10px; /* Менший розмір шрифту */ transition: background-color 0.3s, transform 0.2s; /* Плавний перехід */ } /* Стиль при наведенні тільки на мобільних */ .top-link-login.btn.btn-info.btn-xs:hover { background-color: #007bff; /* Синій колір при наведенні */ transform: scale(1.05); /* Легке збільшення при наведенні */ } } /* Вигляд сторінки товару */ /* Заголовок товару */ .goods-title { font-size: 1.5rem; /* Зменшений розмір шрифту */ font-weight: 400; /* Звичайна вага шрифту */ color: #022c42; /* Основний темно-синій колір */ } /* Загальні стилі для зображень товару */ .product-img { border-radius: 8px; /* Округлені кути */ } /* Основне зображення товару */ .main-img { width: 100%; /* Адаптивна ширина */ border-radius: 8px; /* Округлені кути */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Тінь для глибини */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавний перехід для ефекту наведення */ } .main-img:hover { transform: scale(1.02); /* Легке збільшення при наведенні */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Сильніша тінь при наведенні */ } /* Маленькі зображення товару */ .mini-img { width: 100%; /* Повна ширина для адаптивності */ border-radius: 8px; /* Округлені кути */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* Тінь для відповідності основному зображенню */ cursor: pointer; /* Курсор для інтерактивності */ transition: box-shadow 0.3s ease; /* Плавний перехід для тіні при наведенні */ } .mini-img:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* Підсвічування при наведенні */ } /* Стиль для ключа наявності */ .i-key { font-weight: bold; /* Жирний текст */ } /* Стиль для поля вводу з додатковим відступом знизу */ .form-control.input-sm { text-align: center; /* Центрування тексту */ padding: 16px 0; /* Верхній і нижній внутрішні відступи */ line-height: normal; /* Висота рядка */ height: 42px; /* Висота поля вводу для відповідності висоті кнопок */ font-size: 14px; } /* Адаптація для мобільних пристроїв */ @media (max-width: 768px) { .form-control.input-sm { padding: 12px 0; /* Зменшені відступи для мобільних */ height: 36px; /* Зменшена висота для компактності на менших екранах */ font-size: 12px; /* Менший шрифт для зручності на мобільних */ } } /* ======================================== Стиль для кнопки "Купити" ======================================== */ /* Контейнер для кнопки "Купити" з вирівнюванням по лівому краю */ div.vb-page-content div.goods-view-content div.gv-cart-button-cont { display: flex; align-items: center; justify-content: flex-start; /* Вирівнювання по лівому краю */ } /* Стилі для кнопки "Купити" */ div.vb-page-content div.goods-view-content div.gv-cart-button-cont .button { display: inline-block; min-width: 200px; height: 45px; padding: 10px 20px; font-family: "Open Sans", Roboto, Arial, sans-serif; font-size: 16px; /* Збільшений розмір тексту */ font-weight: 700; /* Жирний шрифт */ color: #ffffff; background-color: #022c42; border: none; border-radius: 8px; text-align: center; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; overflow: hidden; position: relative; } /* Анімація при наведенні */ div.vb-page-content div.goods-view-content div.gv-cart-button-cont .button:hover { background-color: #007bff; /* Акцентний синій */ transform: scale(1.05); } /* Стилі для іконки кошика */ div.vb-page-content div.goods-view-content div.gv-cart-button-cont .button .fa-shopping-cart { margin-right: 8px; font-size: 18px; /* Збільшений розмір іконки */ color: #ffffff; } /* Зміни для мобільних пристроїв */ @media (max-width: 768px) { div.vb-page-content div.goods-view-content div.gv-cart-button-cont .button { min-width: 150px; font-size: 14px; } } /* ======================================== Стиль для кнопки сортування ======================================== */ /* Загальний стиль для кнопки */ div.vb-page-content div.category-content > div.row div.input-group button.btn { background-color: #022c42; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-bottom: 4px; padding-top: 5px; transition: background-color 0.3s ease, transform 0.3s ease; } div.vb-page-content div.category-content > div.row div.input-group button.btn:hover { background-color: #007bff; /* Синій колір на ховер */ transform: scale(1.05); /* Легке збільшення кнопки */ } @media (max-width: 767px) { div.vb-page-content div.category-content > div.row div.input-group button.btn { background-color: #022c42; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-bottom: 7px; padding-top: 5px; transition: background-color 0.3s ease, transform 0.3s ease; } div.vb-page-content div.category-content > div.row div.input-group button.btn:hover { background-color: #007bff; /* Синій колір на ховер */ transform: scale(1.05); /* Легке збільшення кнопки */ } } /* =========================== Відгуки =========================== */ /* Кнопка відповісти в відгуках з напівпрозорим фоном */ div.review-box .review-list .review-item .review-view .rv-bottom .reply-btn { position: relative; top: -5px; margin-left: 13px; padding: revert-layer; color: white; /* Основний колір тексту білий */ border-radius: 5px; /* Округлі кути для більш сучасного вигляду */ padding: 5px 10px; /* Внутрішні відступи для кнопки */ } /* Стиль для ховеру */ div.review-box .review-list .review-item .review-view .rv-bottom .reply-btn:hover { color: white; /* Текст залишається білим при наведенні */ } div.review-box div.rb-form div.head span { /* position: relative; */ display: none; /* cursor: pointer; */ } div.review-box div.rb-form { background-color: #f7f7f7; border-radius: 10px; padding: 15px; } div.review-box div.rb-form .rating-cont .values .text { display: inline-block; width: 74px; text-align: center; color: #777; font-size: 13px; } /* ======================================== Стиль для розділу контакти ======================================== */ /* Основний контейнер контактів */ .contact-content-cont { background-color: #f4f4f4; /* Світло-сірий фон */ padding: 20px; border-radius: 12px; /* Округлі кути */ max-width: 100%; /* Ширина контейнеру 100% */ margin: 0 auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тінь для об'єму */ display: flex; flex-wrap: wrap; /* Дозволяє елементам переноситись на новий рядок */ gap: 20px; /* Відстань між полями */ } /* Поле контактної інформації */ .field { background-color: #ffffff; padding: 15px; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавний перехід */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); flex: 1 1 calc(50% - 20px); /* Встановлюємо ширину поля на 50% мінус відстань між елементами */ max-width: 48%; /* Не більше 50% ширини */ } /* Ефект при наведенні на поле */ .field:hover { transform: translateY(-3px); /* Підняття при наведенні */ box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* Тінь із синім акцентом */ } /* Назва контактної інформації */ .ccc-title { font-size: 1.2rem; color: #022c42; /* Темно-синій */ font-weight: bold; margin-bottom: 5px; text-transform: uppercase; /* Великі літери */ } /* Сама контактна інформація */ .ccc-des { font-size: 1rem; color: #333333; font-weight: normal; } /* Медіа-запит для адаптації на малих екранах */ @media (max-width: 767px) { .field { flex: 1 1 100%; /* На малих екранах буде по одному полю на рядок */ max-width: 100%; } } /* Заголовок в розділі контактів */ div.vb-page-content div.contact-content h1 { font-size: 24px; /* Розмір шрифта */ color: #022c42; /* Темно-синій колір */ font-weight: bold; /* Жирне накреслення */ margin-bottom: 20px; /* Простір під заголовком */ text-transform: uppercase; /* Великі літери */ letter-spacing: 1px; /* Розширення між літерами */ display: inline-block; /* Лінія буде підлаштовуватись під текст */ border-bottom: 3px solid #022c42; /* Лінія під заголовком */ padding-bottom: 0px; /* Відсутність відступу між текстом і лінією */ } /* Медіа-запит для екранів з шириною до 767px (мобільні пристрої) */ @media (max-width: 767px) { div.vb-page-content div.contact-content h1 { font-size: 20px; /* Зменшуємо розмір шрифта */ text-align: center; /* Центруємо заголовок */ margin-bottom: 15px; /* Зменшуємо відступ під заголовком */ } } /* ======================================== Стиль розділу новини ======================================== */ /* Заголовок розділу новин */ div.vb-page-content div.article-content h1 { font-size: 24px; /* Розмір шрифта */ color: #022c42; /* Темно-синій колір */ font-weight: bold; /* Жирне накреслення */ margin-bottom: 20px; /* Простір під заголовком */ text-transform: uppercase; /* Великі літери */ letter-spacing: 1px; /* Розширення між літерами */ display: inline-block; /* Лінія буде підлаштовуватись під текст */ border-bottom: 3px solid #022c42; /* Лінія під заголовком */ padding-bottom: 0px; /* Відсутність відступу між текстом і лінією */ } /* Медіа-запит для екранів з шириною до 767px (мобільні пристрої) */ @media (max-width: 767px) { div.vb-page-content div.article-content h1 { font-size: 20px; /* Зменшуємо розмір шрифта */ text-align: center; /* Центруємо заголовок */ margin-bottom: 15px; /* Зменшуємо відступ під заголовком */ } } /* Стиль для контейнера новин */ div.vb-page-content div.article-content { background-color: #f4f4f4; /* Світло-сірий фон для контейнера */ padding: 20px; /* Додаємо відступи для внутрішнього контенту */ border-radius: 10px; /* Округлені кути */ } /* Стиль для елементу новини */ div.vb-page-content div.article-content ul.article-list li { border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Базова тінь */ cursor: pointer; /* Вказує, що можна клікнути */ } div.vb-page-content div.article-content ul.article-list li:hover { transform: translateY(-2px); /* Легкий підйом */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Глибша тінь при наведенні */ } /* Адаптивні стилі для мобільних пристроїв */ @media (max-width: 768px) { /* Зменшуємо відступи для контейнера новин */ div.vb-page-content div.article-content { padding: 15px; /* Менші відступи для мобільних */ } /* Зменшуємо відступи для елементів новин */ div.vb-page-content div.article-content ul.article-list li { margin-bottom: 15px; /* Більший відступ між елементами */ } /* Виключаємо ефект при наведенні на мобільних (якщо необхідно) */ div.vb-page-content div.article-content ul.article-list li:hover { transform: none; /* Вимикаємо ефект при наведенні */ box-shadow: none; /* Вимикаємо тінь при наведенні */ } /* Приховуємо опис новини на мобільних пристроях */ div.vb-page-content div.article-content ul.article-list li div.inf div.des { display: none; /* Сховати елемент */ } } div.vb-page-content div.article-content ul.article-list li div.inf div.des { font-size: 14px; margin-top: 0px; } @media (max-width: 767px) { div.vb-page-content div.article-content ul.article-list li div.inf { padding-left: 15px; } } /* ======================================== Стилі заголовків різних розділів ======================================== */ /* Заголовок для відгуків */ div.vb-page-content div.review-content div.rc-head h1 { font-size: 24px; /* Розмір шрифта */ color: #022c42; /* Темно-синій колір */ font-weight: bold; /* Жирне накреслення */ margin-bottom: 20px; /* Простір під заголовком */ text-transform: uppercase; /* Великі літери */ letter-spacing: 1px; /* Розширення між літерами */ display: inline-block; /* Лінія буде підлаштовуватись під текст */ border-bottom: 3px solid #022c42; /* Лінія під заголовком */ padding-bottom: 0px; /* Відсутність відступу між текстом і лінією */ } /* Заголовок для розділу про компанію */ div.vb-about div.about-cont div.ac-head { font-size: 24px; /* Розмір шрифта */ color: #022c42; /* Темно-синій колір */ font-weight: bold; /* Жирне накреслення */ margin-bottom: 20px; /* Простір під заголовком */ text-transform: uppercase; /* Великі літери */ letter-spacing: 1px; /* Розширення між літерами */ display: inline-block; /* Лінія буде підлаштовуватись під текст */ border-bottom: 3px solid #022c42; /* Лінія під заголовком */ padding-bottom: 0px; /* Відсутність відступу між текстом і лінією */ } /* Заголовок для каталогу товарів */ div.vb-page-content div.goods-catalog-content h1 { font-size: 24px; /* Розмір шрифта */ color: #022c42; /* Темно-синій колір */ font-weight: bold; /* Жирне накреслення */ margin-bottom: 20px; /* Простір під заголовком */ text-transform: uppercase; /* Великі літери */ letter-spacing: 1px; /* Розширення між літерами */ display: inline-block; /* Лінія буде підлаштовуватись під текст */ border-bottom: 3px solid #022c42; /* Лінія під заголовком */ padding-bottom: 0px; /* Відсутність відступу між текстом і лінією */ } /* Адаптивний стиль для мобільних пристроїв */ @media (max-width: 768px) { /* Заголовок для відгуків на мобільних */ div.vb-page-content div.review-content div.rc-head h1 { font-size: 20px; /* Зменшуємо розмір шрифта */ text-align: center; /* Центруємо заголовок */ margin-bottom: 15px; /* Зменшуємо відступ під заголовком */ } /* Заголовок для розділу про компанію на мобільних */ div.vb-about div.about-cont div.ac-head { font-size: 20px; /* Зменшуємо розмір шрифта */ text-align: center; /* Центруємо заголовок */ margin-bottom: 15px; /* Зменшуємо відступ під заголовком */ } /* Заголовок для каталогу товарів на мобільних */ div.vb-page-content div.goods-catalog-content h1 { font-size: 20px; /* Зменшуємо розмір шрифта */ text-align: center; /* Центруємо заголовок */ margin-bottom: 15px; /* Зменшуємо відступ під заголовком */ } } /* ======================================== Вікно входу на сайт ======================================== */ /* Хедер вікна */ #login-reg-box div.modal-header, #login-box div.modal-header { border-radius: 0; background: linear-gradient(45deg, #022c42, #007bff, #ffcc00); background-size: 300% 300%; color: #fff; font-size: 16px; border-top-right-radius: 22px; border-top-left-radius: 22px; border: none; padding: 10px 10px; animation: gradientAnimation 5s ease infinite; } /* Ключові кадри для анімації */ @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Кнопка відміна */ #login-box div.modal-footer button { width: 75px; align-items: center; justify-content: center; display: inline-flex; border-radius: 7px; padding: 10px 60px; border: none; margin-right: 9px; } /* Кнопка логін */ #login-reg-box button.registration, #login-box button.login-btn { background: #022c42; /* Основний фон до наведення */ transition: background 0.5s ease, background-position 0.5s ease, transform 0.3s ease; } /* При наведенні додається анімований градієнт */ #login-reg-box button.registration:hover, #login-box button.login-btn:hover { background: linear-gradient(45deg, #022c42, #007bff, #ffcc00); background-size: 400% 400%; /* Забезпечує більший розмір для плавного руху */ animation: gradientAnimation 3s ease-in-out infinite; /* Анімація градієнта */ transform: scale(1.1); } /* Ключові кадри для анімації градієнта */ @keyframes gradientAnimation { 0% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* Поля вводу mail-pas */ #login-reg-box input, #login-box input { border-radius: 999px; /* Максимально округлені краї */ border-color: gray; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Підсвічування при наведенні */ #login-reg-box input:hover, #login-box input:hover, #login-reg-box input:focus, #login-box input:focus { border-color: #007bff; box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Підсвічування */ outline: none; /* Прибрати стандартне підсвічування браузера */ } /* Контейнер реєстрації */ #login-reg-box div.modal-content, #login-box div.modal-content { border-radius: 25px; border: none; } /* Кнопка фейсбук */ #login-reg-box .social-btn a.fb-btn, #login-box .social-btn a.fb-btn { border-radius: 25px; } /* ======================================== Розділ корзина ======================================== */ /* Контейнер корзини */ .modal-content { border-radius: 20px; background-color: #f4f4f4; } /* Шапка корзини */ .modal-header { border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 10px; } /* Кнопка очистити корзину */ /* Стиль для кнопки */ #cart-box div.modal-header > .btn-danger { height: 30px; /* Зменшити висоту */ width: 30px; /* Зробити ширину однаковою з висотою */ top: 5px; /* Позиціювання кнопки */ right: 10px; /* Відступ справа */ margin: 5px; /* Легкий зовнішній відступ */ border-radius: 50%; /* Округлі кути для круглої кнопки */ padding: 0; /* Відсутність додаткових відступів */ border: none; /* Без рамки */ background-color: transparent; /* Прозорий фон */ display: flex; justify-content: center; /* Вирівнювання хрестика по горизонталі */ align-items: center; /* Вирівнювання хрестика по вертикалі */ } /* Стиль для хрестика */ #cart-box div.modal-header > .btn-danger .glyphicon { font-size: 18px; /* Трохи зменшити розмір хрестика */ color: #bbb; /* Колір хрестика */ margin-top: -2px; /* Легке коригування по вертикалі */ } /* Стиль для самих іконок */ .glyphicon-remove:before { content: "\e014"; /* Хрестик */ font-family: 'Glyphicons Halflings'; /* Вказуємо шрифт для іконки */ } /* Напис в шапці */ .modal-title { font-size: 20px; text-align: center; } /* Прибираємо назву фірми */ #cart-box div.cart-list div.firm-order div.firm-title { display: none; } /* Контейнери товарів */ #cart-box div.cart-list div.firm-order div.item { display: flex; align-items: center; height: auto; min-height: 120px; overflow: hidden; border-radius: 15px; margin: 10px 0; background-color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease, transform 0.3s ease; font-size: 14px; } #cart-box div.cart-list div.firm-order div.item:hover { transform: scale(1.02); /* Легке збільшення картки на ховер */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Збільшення тіні при наведенні */ } /* Контейнери товарів для мобільних пристроїв */ @media (max-width: 767px) { #cart-box div.cart-list div.firm-order div.item { display: block; /* Змінюємо display на block для мобільних */ padding: 5px; height: auto; /* Автоматична висота для мобільних */ margin: 10px 0; /* Залишаємо вертикальний відступ */ background-color: #ffffff; /* Білий фон */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Легка тінь для підняття картки */ transition: box-shadow 0.3s ease, transform 0.3s ease; /* Анімація для змінення тіні та масштабу */ } #cart-box div.cart-list div.firm-order div.item:hover { transform: none; /* Прибираємо ефект масштабу для мобільних */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Зменшуємо тінь на ховер */ } } /* назва товара */ .col-sm-4 { font-weight: 400; font-family: 'Roboto'; } /* Стиль для мобільних пристроїв */ @media (max-width: 767px) { .col-sm-4 { font-weight: 500; } } @media (max-width: 768px) { #cart-box div.cart-list div.item div.cart-info div.center a { font-size: 15px; } } /* Фото товара */ .col-sm-2 { width: 16.66666667%; display: flex; justify-content: center; align-items: center; } /* Фото товара для мобільних пристроїв */ @media (max-width: 767px) { .col-sm-2 { width: 25%; /* Збільшуємо ширину до 100%, щоб займати всю ширину екрану */ display: block; /* Змінюємо display на block, щоб елементи відображались один під одним */ } } /* Блок з кнопкою купити */ #cart-box div.cart-list div.firm-tools { margin-bottom: -15px; padding-bottom: 0px; } /* Cумма */ #cart-box div.cart-list div.goods-list div.order-sum { background-color: #DFE009; /* Яскравий фон */ padding: 10px 20px; /* Більші відступи для більшої зручності */ margin-right: -15px; float: right; color: #333; display: inline-block; margin-bottom: 20px; border-radius: 10px; /* Закруглені кути */ font-weight: bold; /* Жирний шрифт для виділення */ font-size: 16px; /* Трошки збільшений шрифт */ } /* Прибираємо назву фірми 2 */ #cart-box div.cart-form div.firm-order div.firm-title { display: none; } /* Прибираємо таблицю */ .table-bordered { display: none; } .form-row { display: flex; flex-wrap: wrap; gap: 10px; /* Відстань між колонками */ } .col-sm-6 { width: calc(50% - 10px); /* Ширина з урахуванням відступу */ margin: 5px; /* Відступ між блоками */ min-width: 200px; /* Мінімальна ширина для кращої адаптивності */ } @media (max-width: 768px) { .col-sm-6 { width: 100%; /* Повна ширина на мобільних */ margin: 5px 0; /* Відступи зверху та знизу */ } } #cart-box .cart-form .head { padding: 10px 15px; /* Внутрішній відступ для більшого простору */ border-bottom: 2px solid #ddd; /* Нижня межа для поділу заголовка */ font-size: 20px; /* Розмір шрифту */ font-weight: bold; /* Жирний шрифт */ color: #022c42; /* Колір тексту */ background-color: #f4f4f4; /* Фон для виділення */ margin-bottom: 15px; /* Відступ знизу для відокремлення від контенту */ border-radius: 8px 8px 0 0; /* Закруглення країв зверху */ text-align: center; /* Центрування тексту */ } /* ======================================== Все інше ======================================== */ /* Стиль кнопки меню з градієнтом та анімацією */ div.vb-main-menu.main-menu-horizontal div.mobile-menu div.toggle-menu { border-color: #022c42; background: linear-gradient(45deg, #022c42, #007bff, #ffcc00); background-size: 350% 100%; animation: gradientAnimation 3s ease infinite; border-radius: 10px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; height: 43px; width: 45px; margin-top: 3px; } /* Анімація градієнта */ @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Ефект при наведенні */ div.vb-main-menu.main-menu-horizontal div.mobile-menu div.toggle-menu:hover { box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.3); /* Додаємо легку тінь */ transform: scale(1.05); /* Збільшуємо кнопку трохи */ } /* Ефект при натисканні */ div.vb-main-menu.main-menu-horizontal div.mobile-menu div.toggle-menu:active { box-shadow: 0px 2px 6px rgba(0, 123, 255, 0.2); /* Легка тінь при натисканні */ transform: scale(0.98); /* Зменшуємо кнопку трохи */ } /* Лінії на кнопці */ div.vb-main-menu.main-menu-horizontal div.mobile-menu div.toggle-menu span.hamburger { height: 4px; border-radius: 2px; position: relative; content: ""; top: 19.5px; display: block; width: 60%; margin: 0 auto; } div.vb-main-menu.main-menu-horizontal div.mobile-menu div.toggle-menu span.hamburger:before { height: 4px; border-radius: 2px; background-color: inherit; position: relative; content: ""; top: -8px; display: block; width: 100%; margin: 0 auto; } div.vb-main-menu.main-menu-horizontal div.mobile-menu div.toggle-menu span.hamburger:after { height: 4px; border-radius: 2px; background-color: inherit; position: relative; content: ""; top: 4px; display: block; width: 100%; margin: 0 auto; } /* Стиль кнопки фільтрів */ div.vb-main-menu.main-menu-horizontal div.mobile-menu div.firm-filter-box-btn { height: 43px; width: 45px; margin-top: 3px; border-radius: 10px; } /* Стиль значку фільтру */ div.vb-main-menu.main-menu-horizontal div.mobile-menu div.firm-filter-box-btn i { top: 9px; } /* Стиль заголовку опису */ h1 { font-size: 22px; line-height: 35px; } /* Ховаємо характеристики товару */ div.vb-page-content div.goods-view-content div.goods-properties { display: none !important; } /* Меню навігації на стор товару */ div.vb-page-content div.goods-view-content div.goods-prop .nav-tabs { background-color: #F7F7F7; padding: 12px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: auto; } /* Заголовок товару */ div.vb-page-content div.goods-view-content div.goods-title h1 { color: #333; display: block; font-size: clamp(24px, 2.5vw, 25px); margin-bottom: 0px; font-weight: normal; padding-bottom: initial; } /* Заголовок розділів*/ h3 { position: relative; /* Потрібно для позиціонування ::before */ font-weight: bold; margin-top: 20px; /* Відступ над усім блоком (включаючи лінію) */ /* Збільшуємо ВЕРХНІЙ padding, щоб текст не "прилипав" до лінії знизу */ padding: 15px 0px 9px 0px; /* Наприклад, 15px зверху, 9px знизу */ line-height: 24px; font-size: 18px; color: #022c42; background-color: transparent; } /* Додаємо тонку лінію НАД заголовком через ::before */ h3::before { content: ""; position: absolute; left: 0px; right: 0px; /* Позиціонуємо лінію від ВЕРХНЬОГО краю h3 */ top: 0px; /* Лінія буде у самого верху блоку h3 */ /* Якщо потрібен невеликий відступ самої лінії від верху контейнера h3, можна задати top: 5px;, але тоді, можливо, доведеться скоригувати padding-top або margin-top у h3 */ height: 2px; /* Товщина лінії */ background-color: #ccc; /* Колір лінії */ border-radius: 1px; } /* Видимий заголовок в описі */ h2.visible-xs { display: block !important; } /* Вистота заголовка в моб. версії */ @media (max-width: 767px) { div.vb-page-content div.goods-view-content #gt-description h2 { margin-bottom: 10px; } } /* Заголовок опису в пк версії сайту*/ @media (min-width: 768px) { div.vb-page-content div.goods-view-content div.goods-properties span.h2, div.vb-page-content div.goods-view-content div.tab-pane h2:first-child { font-weight: bold; margin: 0 0 5px 0; padding: 9px 10px; line-height: 24px; font-size: 19px; color: #022c42; background-color: #f5f5f5; border-radius: 8px; text-align: center; } } /* Артикиль товару */ div.vb-page-content div.goods-view-content div.goods-title div.article { font-size: 12px; color: #333; margin-top: 5px; } /* Блок переваги */ div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.vb-cont { /* background-color: #ffffff; */ border: 1px solid transparent; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px; background-color: #ffffff; transition: box-shadow 0.3s ease; } div.vb-advantage.vb-advantage-2 div.avn-list { text-align: center; background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 30px; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-block-title { position: relative; margin-top: 10px; border: none; font-family: 'Roboto Condensed Bold', Roboto, Arial; background-color: #022c42; color: #ffffff; text-align: center; padding: 8px 20px; margin-bottom: 15px; font-weight: 700; text-transform: uppercase; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); overflow: hidden; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-block-title h2 { color: white; font-weight: bold; font-size: 16px; padding-bottom: 0px; line-height: 1.5; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-list div.avn-row .avn-item .title h3 { position: unset; margin-top: 0px; color: #022c42; background-color: transparent; display: block; padding: 0px; font-weight: 700; font-size: 20px; text-align: center; line-height: 1.1; margin-bottom: 10px; } div.vb-advantage.vb-advantage-2.page-block-id-2368723 div.avn-list div.avn-row .avn-item .title h3::before { content: none; } /* Кнопки в описі сайту */ .about-page-buttons { display: flex; justify-content: center; /* Центрирование кнопок по горизонтали */ margin-top: 30px; /* Отступ сверху от кнопок */ } .about-page-buttons .button.primary { display: inline-block; padding: 12px 25px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.1em; transition: background-color 0.3s ease; margin: 5px; background-color: #007bff; /* Или ваш основной цвет */ color: white; } .about-page-buttons .button.primary:hover { background-color: #0056b3; /* Или цвет при наведении */ } .about-page-buttons .button.secondary { display: inline-block; padding: 12px 25px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.1em; transition: background-color 0.3s ease; margin: 5px; background-color: #6c757d; /* Или ваш вторичный цвет */ color: white; } .about-page-buttons .button.secondary:hover { background-color: #5a6268; /* Или цвет при наведении */ } /* Стили для раздела "О нас" на главной странице */ .about-us-home { text-align: center; padding: 20px; background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 30px; } .about-us-home h2 { color: #333; } .about-us-home p { line-height: 1.8; margin: 0 auto 20px; max-width: 800px; } .about-us-home .button.secondary { display: inline-block; padding: 12px 25px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.1em; background-color: #6c757d; /* Или ваш вторичный цвет */ color: white; transition: background-color 0.3s ease; } .about-us-home .button.secondary:hover { background-color: #022c42; /* Или цвет при наведении */ } /* Адаптация для мобильных устройств */ @media (max-width: 768px) { .about-us-home h2 { font-size: 1.6em; } .about-us-home .button.secondary { padding: 10px 20px; font-size: 1em; } } /* Стиль сторінки оплата і доставка */ .delivery-box { background-color: #f5f5f5; padding: 20px; border-radius: 5px; margin-bottom: 20px; margin-top: 10px; } .delivery-box-cont { overflow: hidden; } .delivery-img { float: left; margin-right: 20px; } .delivery-np-img { display: block; margin: 0 auto 20px; max-width: 100%; height: auto; } .delivery-box-dark { background-color: #022c42; color: #ffffff; border-radius: 10px; } .delivery-box-dark h2 { color: #ffffff; font-size: 16pt; margin-bottom: 10px; } .delivery-box p, .delivery-box ul li p { font-size: 12pt; } .delivery-box h2 { font-size: 12pt; padding-bottom: 0px; } /* Стиль сторінки повернення і гарантія */ .delivery-box { background-color: #f5f5f5; padding: 20px; border-radius: 5px; margin-bottom: 20px; margin-top: 10px; } .delivery-box-cont { overflow: hidden; } .delivery-img { float: left; margin-right: 20px; } .delivery-np-img { display: block; margin: 0 auto 20px; max-width: 100%; height: auto; } .delivery-box-dark { background-color: #022c42; color: #ffffff; border-radius: 10px; } .delivery-box-dark h2 { color: #ffffff; font-size: 16pt; margin-bottom: 10px; } .delivery-box p, .delivery-box ul li p { font-size: 12pt; } .delivery-box h2 { font-size: 12pt; padding-bottom: 0px; } /* Стиль списків */ ul { list-style-type: disc; margin-left: 1.5em; padding-left: 0.5em; } ol { list-style-type: decimal; margin-left: 1.5em; padding-left: 0.5em; } div.vb-page-content div.search-content ul.goods-list li.item div.goods-cont { border-radius: 10px; } div.vb-page-content div.search-content ul.goods-list li.item div.title { line-height: 1.1; margin-bottom: 2px; margin-top: 5px; max-height: 55px; position: relative; padding-bottom: 2px; } /* Лого шапки сайту на мобільних */ @media (max-width: 768px) { div.vb-header.vb-header-7 div.vbh7-cont .vbh7-left img { width: auto; /* Виключає фіксовану ширину */ height: 60px; /* Задає чітке значення висоти для логотипу */ } } div.vb-header.vb-header-7 div.vbh7-cont .vbh7-center { width: 100%; max-width: 600px; padding: 15px; margin: auto; } @media (max-width: 768px) { div.vb-header.vb-header-7 div.vbh7-cont .vbh7-center { display: none; } } .contact-box { min-width: 230px; text-align: right; position: relative; } .contact-toggle { font-weight: 700; font-size: 15px; color: #022c42; cursor: pointer; position: relative; } .contact-details { position: absolute; right: 0; top: 100%; width: 260px; padding: 16px 20px; background: #ffffff; border-radius: 12px; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s ease; z-index: 1000; text-align: left; } .contact-toggle:hover .contact-details { opacity: 1; visibility: visible; transform: translateY(0); } .contact-item { display: block; color: #007bff; text-decoration: none; margin-bottom: 0px; transition: color 0.3s; line-height: 0.2; } .contact-item:hover { color: #ff8c00; text-decoration: underline; } .contact-hours { font-size: 14px; color: #333; line-height: 0.9; } .phone-main { display: inline-block; padding: 5px 10px; background: linear-gradient(135deg, #022c42, #03506f); border-radius: 20px; transition: background 0.6s ease-in-out, color 0.3s ease; color: #ffffff; } .contact-toggle:hover .phone-main { background: linear-gradient(135deg, #03506f, #0582b0); color: #ffffff; } @media (max-width: 767px) { .contact-box { display: none; } } /* Стиль сторінки замовлення */ .order-complete-content .to-user-profile { text-align: center; margin-top: 0px; padding: 11px; } /* Базовий блок оформлення замовлення */ .order-complete-content .finish-block { background-color: #f6fff9; padding: 40px 30px; border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); text-align: center; max-width: 600px; margin: 40px auto; transition: all 0.3s ease-in-out; } /* Іконка галочки */ .order-complete-content .finish-block .left .icon i { font-size: 42px; color: #4CAF50; padding: 18px; border-radius: 50%; border: 6px solid #4CAF50; background-color: #e8fbe9; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 20px; transition: transform 0.3s ease; } .order-complete-content .finish-block .left .icon i:hover { transform: scale(1.1) rotate(2deg); } /* Заголовок */ .order-complete-content .finish-block h2 { font-size: 23px; font-weight: 700; color: #2E7D32; margin-bottom: 10px; text-align: center; letter-spacing: 0.5px; } /* Підзаголовок */ .order-complete-content .finish-block p { font-size: 16px; color: #555; margin-bottom: 20px; line-height: 1.5; } /* Кнопка */ .order-complete-content .to-user-profile a { background: linear-gradient(135deg, #022c42, #03506f); color: #fff; padding: 12px 28px; font-size: 16px; font-weight: 600; border-radius: 8px; text-decoration: none; display: inline-block; transition: background 0.3s ease, transform 0.2s ease; } .order-complete-content .to-user-profile a:hover { background: linear-gradient(135deg, #03506f, #01405a); transform: translateY(-2px); } /* Адаптація для мобільних пристроїв */ @media (max-width: 768px) { .order-complete-content .finish-block { padding: 30px 20px; margin: 40px auto; } .order-complete-content .finish-block h2 { font-size: 22px; } .order-complete-content .finish-block p { font-size: 15px; } .order-complete-content .to-user-profile a { font-size: 15px; padding: 10px 20px; width: 100%; max-width: 300px; } .order-complete-content .finish-block .left .icon i { font-size: 36px; padding: 14px; border-width: 5px; } } @media (max-width: 480px) { .order-complete-content .finish-block h2 { font-size: 20px; } .order-complete-content .finish-block p { font-size: 14px; } .order-complete-content .to-user-profile a { font-size: 14px; padding: 10px 16px; } .order-complete-content .finish-block { padding: 25px 15px; } } .order-complete-content .icon .checkmark-img { width: 74px; height: 74px; border-radius: 50%; background-color: #e8fbe9; padding: 5px; margin-bottom: 10px; border: 6px solid #4CAF50; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } .order-complete-content .icon .checkmark-img:hover { transform: scale(1.1) rotate(2deg); } .order-complete-content .order-note { font-size: 15px; color: #555; margin-top: 20px; font-style: italic; } .order-complete-content .contact-info { margin-top: 20px; font-size: 15px; color: #444; } .order-complete-content .contact-info a { color: #022c42; text-decoration: none; font-weight: 500; } .order-complete-content .contact-info a:hover { color: #FA7722; text-decoration: underline; } .order-complete-content h2 { font-size: 24px; font-weight: 700; color: #2E7D32; margin-bottom: 10px; text-align: center; letter-spacing: 0.5px; } .order-complete-content .left { display: inline-block; vertical-align: top; } .order-complete-content .right { display: inline-block; padding-left: 30px; text-align: left; vertical-align: middle; } @media (max-width: 768px) { .order-complete-content .finish-block { padding: 30px 20px; margin: 20px auto; } .order-complete-content .right { display: block; padding-left: 0px; margin-top: 15px; text-align: center; } .order-complete-content h2 { font-size: 20px; } .order-complete-content .icon .checkmark-img { width: 56px; height: 56px; padding: 10px; border-width: 5px; } } @media (max-width: 768px) { .a-vizit-goods-list.a-vizit-goods-list-1 .avg-item, .a-vizit-goods-list.a-vizit-goods-list-small.a-vizit-goods-list-1 .avg-item { flex-basis: 50%; max-width: 50%; } .a-vizit-goods-list.a-vizit-goods-list-1 .avg-item .price-cont .a-opt-link { font-size: 14px; } } div.vb-page-content div.about-content div.about-cont div.ac-text ul, div.vb-page-content div.about-content div.about-cont div.ac-text ol { position: relative; left: 10px; margin: 5px 0; } div.vb-page-content div.about-content div.about-cont div.ac-head h1 { font-size: 20px; padding: 0px; margin: 0px; } div.vb-page-content div.about-content div.about-cont div.ac-text h2 { font-size: 18px; border-bottom: 2px solid #ccc; padding-bottom: 5px; margin-bottom: 15px; } div.vizit-box.vb-panel div.vizit-box-head h2 { color: white; font-weight: bold; font-size: 16px; padding-bottom: 0px; line-height: 1.5; } /* Стилі для банера, виключно для ПК */ @media (min-width: 768px) { /* Елементи керування банером */ .carousel-control.left, .carousel-control.right { background: none; /* Забираємо градієнтний фон */ width: 10%; /* Зменшена ширина для кращого вигляду */ font-size: 24px; color: #ffffff; /* Білий колір для стрілок */ text-align: center; opacity: 0.8; /* Напівпрозорі стрілки */ transition: opacity 0.3s ease; /* Плавний перехід для стрілок */ } /* Підсвічування при наведенні */ .carousel-control:hover { opacity: 1; } /* Індикатори банера */ .carousel-indicators { position: absolute; z-index: 100; bottom: 15px; /* Збільшена відстань від нижнього краю */ left: 50%; transform: translateX(-50%); } .carousel-indicators li { display: inline-block; width: 12px; height: 12px; margin: 0 6px; cursor: pointer; background-color: rgba(0, 0, 0, 0.3); /* Напівпрозорий чорний */ border: 2px solid rgba(255, 255, 255, 0.5); /* Напівпрозора біла обводка */ border-radius: 50%; /* Круглі індикатори */ transition: background-color 0.3s ease, transform 0.3s ease; /* Плавні переходи */ } .carousel-indicators .active { background-color: #ffcc00; /* Жовтий акцентний колір для активного індикатора */ border-color: #ffcc00; transform: scale(1.2); /* Збільшення активного індикатора */ } /* Стиль для зображення банера */ .carousel-inner > .item img, div.vb-banner div.single-il img { text-align: center; margin: 0 auto; width: 100%; border-radius: 8px; /* Округлені кути для зображень */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Легка тінь для об’ємного вигляду */ } } div.vizit-box.page-block-id-2368812 div.vb-cont .vizit-box-boby { position: relative; margin-top: 10px; border: none; font-family: 'Roboto Condensed Bold', Roboto, Arial; background-color: #022c42; color: #ffffff; text-align: center; padding: 8px 20px; margin-bottom: 15px; font-weight: 700; text-transform: uppercase; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); overflow: hidden; } div.vizit-box.page-block-id-2368812 div.vb-cont .vizit-box-boby h1{ color: white; font-weight: bold; font-size: 16px; padding-bottom: 0px; line-height: 1.5; } @media (max-width: 768px) { div.vizit-box.page-block-id-2368812 div.vb-cont .vizit-box-boby { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } /* Стили таблиць */ table { width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px; background-color: #fff; } th, td { padding: 10px 12px; border: 1px solid #ccc; text-align: left; vertical-align: middle; } thead { background-color: #f5f5f5; } th { font-weight: bold; color: #333; text-transform: uppercase; font-size: 13px; } tbody tr:nth-child(odd) { background-color: #fafafa; } tbody tr:hover { background-color: #eef6ff; } strong { font-weight: 700; } @media print { * { color: #000 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; } thead { display: table-header-group; } tr { page-break-inside: avoid; } } /* Стилі для кнопки новин */ .button-news { display: inline-block; background-color: #022c42; /* Основний темно-синій */ color: #ffffff; padding: 10px 20px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 15px; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } /* Ефект при наведенні */ .button-news:hover { background-color: #005a87; /* Світліший відтінок синього для ефекту */ color: #ffcc00; /* Жовтий акцентний колір (якщо він є у схемі сайту) */ cursor: pointer; } /* Стиль заголовку статей */ div.vb-page-content div.article-view-content h1 { font-weight: 700; margin: 0 0 10px 0; padding: 12px 16px; line-height: 1.4; font-size: clamp(18px, 5vw, 24px); /* Адаптивний розмір шрифту */ color: #022c42; background-color: #f5f5f5; border-radius: 10px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Легка тінь для об'єму */ transition: all 0.3s ease; /* Плавний ефект для адаптацій */ } /* Додаткове покращення для мобільних (якщо не використовується clamp()) */ @media (max-width: 480px) { div.vb-page-content div.article-view-content h1 { font-size: 17px; padding: 10px 12px; } } /* Стиль заголовку h2 статей */ div.vb-page-content div.article-view-content h2 { font-weight: 600; font-size: medium; color: #022c42; margin: 20px 0 10px 0; padding: 8px 12px; background-color: #eaf2f7; /* Світлий фон для виокремлення */ border-left: 4px solid #007bff; /* Синій акцент зліва */ border-radius: 6px; line-height: 1.4; } /* === ПОКРАЩЕНЕ МОДАЛЬНЕ ВІКНО ГАЛЕРЕЇ (v2.5) === */ /* --- 1. Блокування прокрутки сторінки --- */ html:has(#image-gallery-box.active), body:has(#image-gallery-box.active) { overflow: hidden; } /* --- 2. Фон (Оверлей) --- */ #image-gallery-box { position: fixed; inset: 0; /* (НАДВИСОКИЙ Z-INDEX) */ z-index: 99998; /* (БАЗА/ПК) Центрування вікна по центру */ display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; /* Дозволяємо скролити сам оверлей, якщо вікно не влазить */ overflow-y: auto; background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; } #image-gallery-box.active { visibility: visible; opacity: 1; } /* --- 3. Контейнер (.wrapper) --- */ #image-gallery-box div.wrapper { width: 100%; height: auto; max-width: 800px; /* Макс. ширина на ПК */ max-height: 90vh; /* Макс. висота на ПК */ background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); overflow: auto; display: flex; flex-direction: column; /* Важливо: .wrapper сам по собі не має бути fixed */ position: relative; /* Анімація */ transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } #image-gallery-box.active div.wrapper { transform: scale(1); } /* --- 4. Кнопка "Закрити" (Хрестик) --- */ #image-gallery-box i.close { position: fixed; top: 20px; right: 20px; /* (НАЙВИЩИЙ Z-INDEX) */ z-index: 99999; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #ffffff; text-shadow: none; opacity: 1; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } #image-gallery-box i.close:hover { background-color: rgba(0, 0, 0, 0.7); transform: scale(1.05); } /* --- 5. Приховуємо праву колонку (з ціною) --- */ #image-gallery-box div.right { display: none !important; } /* --- 6. Ліва колонка (тепер єдина) --- */ #image-gallery-box div.left { width: 100%; height: auto; border-right: none; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; } /* --- 7. Головне фото --- */ #image-gallery-box div.left div.main-photo { flex-grow: 1; width: 100%; height: auto; min-height: 200px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; border: none; position: relative; overflow: hidden; } #image-gallery-box div.left div.main-photo img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; } /* --- 8. Список мініатюр --- */ #image-gallery-box div.left div.list-photos { flex-shrink: 0; width: 100%; height: auto; display: flex; justify-content: center; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 5px 0; } /* --- 9. Елемент мініатюри --- */ #image-gallery-box div.left div.list-photos div.item { width: 80px; height: 80px; flex-shrink: 0; border: 2px solid #ddd; border-radius: 6px; cursor: pointer; overflow: hidden; transition: border-color 0.2s ease; } #image-gallery-box div.left div.list-photos div.item.active, #image-gallery-box div.left div.list-photos div.item:hover { border-color: #2ECC71; } #image-gallery-box div.left div.list-photos div.item img { width: 100%; height: 100%; object-fit: cover; } /* --- 10. Адаптація для мобільних --- */ @media (max-width: 768px) { /* 1. Контейнер .wrapper: */ #image-gallery-box div.wrapper { /* Робимо вікно просто вужчим, центрування залишається */ max-width: 95vw; } /* 2. Кнопка "Закрити": */ #image-gallery-box i.close { top: 15px; right: 15px; width: 36px; height: 36px; font-size: 18px; } }