/*! Version: 2.4 | Date: 2025-12-04 | Optimized - Full Styles Preserved */ /* critical.css content */ * { margin: 0; padding: 0; box-sizing: border-box; } body, html { margin: 0; padding: 0; height: 100%; overflow-x: hidden; } body { color: #666; font-family: Arial, sans-serif; } .slide-image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .slide { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .header { font-family: Arial, sans-serif; line-height: 1.4; box-sizing: border-box; position: relative; } .header * { box-sizing: border-box; } .header__top { padding: 5px 0; border-bottom: 2px solid #1e3a5c; background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); color: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header__top-container { max-width: 1920px; margin: 0 auto; padding: 0 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; } .header__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; } .header__nav-list a { text-decoration: none; color: #ffffff; font-size: 14px; font-weight: bold; text-transform: uppercase; transition: color 0.3s ease; padding: 4px 0; display: block; white-space: nowrap; } .header__nav-list a:hover { color: #ffd700; } .header__social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; } .header__social-list img { display: block; width: 22px; height: 22px; border-radius: 3px; transition: transform 0.3s ease, opacity 0.3s ease; border: none; } .header__social-list img:hover { transform: scale(1.1); opacity: 0.8; } .header__main { padding: 15px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-bottom: 3px solid #2d5b8a; min-height: 150px; } .header__main-container { max-width: 1920px; margin: 0 auto; padding: 0 5px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; } .header__logo { justify-self: start; } .header__logo img { width: 250px; height: 125px; display: block; transition: opacity 0.3s ease; object-fit: contain; } .header__logo img:hover { opacity: 0.9; } .header__banner { text-align: center; justify-self: center; position: static; height: auto; min-height: 135px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .header__title h1 { font-size: 2.2rem; font-weight: 600; font-family: sans-serif; text-align: center; line-height: 1.1; text-shadow: 1px 2px 2px rgba(0, 0, 102, 0.8); background: red; color: #FFF; padding: 10px 25px; transition-duration: .3s; border-radius: 25px; transform: scaleX(1.05); transform-origin: center; display: block; margin: 0; border-bottom: 5px solid #F8FF94; } .header__banner-txt { text-align: center; line-height: 1.6; } .header__banner-txt p { margin: 0; font-weight: bold; font-size: 18px; font-weight: 500; font-family: sans-serif; text-align: center; line-height: 1.4; transform: scaleX(1.1); transform-origin: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); background: #FEF7F6; color: #000; transition-duration: .3s; border-radius: 8px; padding: 3px; margin: 0 auto; } .header__banner-txt sup { font-size: 12px; vertical-align: super; } .header__contacts { text-align: center; justify-self: end; min-width: 280px; } .header__phone, .header__email { margin: 0 0 12px 0; } .header__phone a { font-size: 2.4rem; font-weight: 500; font-family: sans-serif; text-align: center; line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); background: #FEF7F6; color: #000; transition-duration: .3s; border-radius: 8px; padding: 2px; display: inline-block; min-width: 200px; } .header__phone a:hover { color: #2d5b8a; } .header__email a { font-size: 2.4rem; font-weight: 500; font-family: sans-serif; text-align: center; line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); background: #FEF7F6; color: #000; transition-duration: .3s; border-radius: 8px; padding: 2px; display: inline-block; min-width: 200px; } .header__email a:hover { color: #d9534f; } .emoji-phone { font-size: 24px; line-height: 1; margin-right: 2px; vertical-align: baseline; } .emoji-email { font-size: 24px; line-height: 1; margin-right: 6px; vertical-align: baseline; } .header__search { display: flex; gap: 5px; margin-top: 15px; min-width: 250px; } .header__search input { padding: 8px 12px; border: 2px solid #2d5b8a; border-radius: 4px; flex-grow: 1; font-size: 14px; min-width: 200px; font-family: Arial, sans-serif; transition: border-color 0.3s ease; } .header__search input:focus { outline: none; border-color: #d9534f; } .header__search input::placeholder { color: #999; font-size: 13px; } .header__search button { padding: 8px 15px; background-color: #2d5b8a; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold; transition: background-color 0.3s ease; font-family: Arial, sans-serif; white-space: nowrap; flex-shrink: 0; } .header__search button:hover { background-color: #d9534f; } :root { --primary: #0a1f3c; --primary-light: #1a3b6c; --accent: #00d4ff; --accent-hover: #00b8e0; --white: #ffffff; --gray-light: #f8fafc; --gray: #64748b; --gray-dark: #334155; --dark-bg: #ffffff; --dark-card: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --card-radius: 12px; } h3.cate { font-size: 1.5em; text-align: center; } .menu-container { max-width: 1920px; margin: 0 auto; } .main-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, auto)); gap: 2px; background: linear-gradient(145deg, #2c3e50, #34495e); padding: 5px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); position: relative; } .main-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); } .menu-item { position: relative; } .menu-link { display: flex; align-items: center; justify-content: space-between; padding: 10px; color: #ecf0f1; text-decoration: none; font-weight: 500; transition: all 0.3s ease; background: linear-gradient(135deg, #485563 0%, #29323c 100%); border-radius: 10px; margin: 2px; border: 2px solid transparent; transform: translateZ(0); will-change: transform, background-color; } .menu-link:hover { background: linear-gradient(135deg, #4a6572 0%, #34495e 100%); transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); border-color: var(--accent); box-shadow: var(--shadow-lg); } .menu-link i { margin-left: 10px; transition: transform 0.3s ease; } .menu-item:hover .menu-link i { transform: rotate(180deg); } .menu > li > a, .menu ul li a { text-indent: 0.5em; } #nav > li ul ul { background: #e6e6e1; left: 120px; position: absolute; } nav ul ul { display: none; top: 100%; } nav ul ul li { display: list-item; position: relative; } nav ul ul ul { top: 0; left: 100%; } .submenu { position: absolute; top: 100%; left: 0; width: 250px; background: linear-gradient(145deg, #34495e, #2c3e50); border-radius: 10px; padding: 5px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 1000; transform: translateZ(0); will-change: transform, opacity; } .menu-item:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .submenu-link { display: block; padding: 7px 10px; color: #bdc3c7; text-decoration: none; transition: all 0.3s ease; border-radius: 8px; margin: 2px; position: relative; overflow: hidden; transform: translateZ(0); } .submenu-link::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: linear-gradient(180deg, #4ecdc4, #45b7d1); transform: scaleY(0); transition: transform 0.3s ease; } .submenu-link:hover { color: #ecf0f1; background: linear-gradient(135deg, #4a6572 0%, #34495e 100%); padding-left: 30px; } .submenu-link:hover::before { transform: scaleY(1); } .subsubmenu { position: absolute; left: 100%; top: 0; width: 250px; background: linear-gradient(145deg, #3d566e, #2c3e50); border-radius: 10px; padding: 5px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateX(10px); transition: all 0.3s ease; transform: translateZ(0); will-change: transform, opacity; } .submenu-item { position: relative; } .submenu-item:hover .subsubmenu { opacity: 1; visibility: visible; transform: translateX(0); } .subsubmenu-link { display: block; padding: 7px 10px; color: #95a5a6; text-decoration: none; transition: all 0.3s ease; border-radius: 6px; margin: 2px; font-size: 0.9em; transform: translateZ(0); } .subsubmenu-link:hover { color: #ecf0f1; background: linear-gradient(135deg, #5d6d7e 0%, #34495e 100%); padding-left: 25px; } .mobile-menu-toggle { display: none; position: fixed; top: 20px; right: 20px; background: yellow; border-radius: 6px; border: none; cursor: pointer; z-index: 1002; align-items: center; gap: 10px; padding: 8px 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transform: translateZ(0); } .menu-text { color: black; font-size: 1.8rem; font-weight: 600; } .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 24px; } .hamburger span { display: block; width: 20px; height: 2px; background-color: black; transition: all 0.3s ease; transform: translateZ(0); } .mobile-menu-toggle.active .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-toggle.active .hamburger span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .mobile-menu { display: none; position: fixed; top: 0; left: 0; width: 280px; height: 100%; background: linear-gradient(135deg, rgba(74, 85, 96, 0.95), rgba(45, 55, 72, 0.95)); backdrop-filter: blur(10px); z-index: 1001; overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3); transform: translateZ(0); will-change: transform; } .mobile-menu.active { transform: translateX(0); } .mobile-menu-header { padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .mobile-menu-title { font-size: 1.8rem; font-weight: 600; color: #e2e8f0; } .mobile-menu-close { background: none; border: none; color: #e2e8f0; font-size: 1.5rem; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transform: translateZ(0); } .mobile-menu-close::before { content: "✕"; font-size: 2rem; font-weight: 700; } .mobile-menu-list { list-style: none; padding: 20px 0; } .mobile-menu-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .mobile-menu-link { display: flex; align-items: center; gap: 12px; padding: 15px 20px; text-decoration: none; color: #e2e8f0; font-weight: 500; transition: all 0.3s ease; transform: translateZ(0); } .mobile-menu-link:hover { background: linear-gradient(135deg, rgba(90, 101, 112, 0.5), rgba(60, 70, 85, 0.5)); color: #ffffff; } .mobile-menu-icon { font-size: 1.2rem; width: 24px; text-align: center; color: #a0aec0; } .mobile-submenu-toggle { margin-left: auto; background: none; border: none; color: #a0aec0; cursor: pointer; transition: transform 0.3s ease; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transform: translateZ(0); } .mobile-submenu-toggle::before { content: "▼"; font-size: 1.5rem; font-weight: 700; } .mobile-submenu-toggle.active { transform: rotate(180deg); color: #63b3ed; } .mobile-submenu { display: none; background: rgba(0, 0, 0, 0.2); list-style: none; } .mobile-submenu.active { display: block; } .mobile-submenu-item { border-bottom: none; } .mobile-submenu-link { padding-left: 52px; font-size: 1.4rem; transform: translateZ(0); } .mobile-submenu-link .mobile-menu-icon { font-size: 1rem; } .slider-container { position: relative; width: 100%; overflow: hidden; height: 75vh; margin: 0; padding: 0; } .slider { width: 100%; height: 100%; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; text-align: center; transition: opacity 0.5s ease-in-out; pointer-events: none; } .slide.active { opacity: 1; z-index: 2; pointer-events: auto; } .slide[aria-hidden="true"] { opacity: 0; pointer-events: none; } .slide[aria-hidden="false"] { opacity: 1; pointer-events: auto; } .slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .slide-content { max-width: 700px; width: 90%; margin: 0 auto; padding: 40px; background: rgba(0, 0, 0, 0.2); border-radius: 10px; backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.3); } .slide h2 { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); color: white; } .slide p { font-size: 1.5rem; line-height: 1.6; margin-bottom: 25px; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); color: white; } .slide-btn { display: inline-block; padding: 12px 30px; background: linear-gradient(45deg, #ff6b6b, #ff8e53); color: white; text-decoration: none; border-radius: 30px; font-weight: bold; font-size: 1.8rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .slide-btn:hover, .slide-btn:focus { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .slider-controls { position: absolute; bottom: 40px; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 10; } .btn { background: rgba(255, 255, 255, 0.3); border: none; color: white; padding: 12px 20px; border-radius: 50px; cursor: pointer; font-size: 1.6rem; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); transition: all 0.3s ease; backdrop-filter: blur(7px); display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 15px rgba(0, 0, 0, 1); } .btn:hover, .btn:focus { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .slider-dots { display: flex; gap: 16px; padding: 12px 20px; background: rgba(0, 0, 0, 0.3); border-radius: 50px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } .dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: 2px solid rgba(255, 255, 255, 0.6); position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dot:hover { background: rgba(255, 255, 255, 0.7); transform: scale(1.3); border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3); } .dot.active { background: #ffffff; border-color: #ffffff; transform: scale(1.4); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.4); } .dot.active::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid #ffffff; border-radius: 50%; animation: dotPulse 2s infinite; } @keyframes dotPulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.6; } 100% { transform: scale(1); opacity: 1; } } .dot[aria-selected="true"] { background: white; transform: scale(1.4); border-color: white; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.4); } .dot[aria-selected="false"] { background: rgba(255, 255, 255, 0.4); transform: scale(1); } .dot:focus { outline: 3px solid #00d4ff; outline-offset: 3px; background: rgba(255, 255, 255, 0.8); transform: scale(1.3); } .dot .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .timer-bar { position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; background: rgba(255, 255, 255, 0.2); z-index: 10; overflow: hidden; } .timer-progress { height: 100%; width: 100%; background: white; transform: scaleX(0); transform-origin: left center; transition: transform 0.1s linear; } .social-icon, .slide-image, .icon-image { opacity: 1; transition: opacity 0.3s ease; transform: translateZ(0); } .social-icon:hover, .slide-image:hover, .logo img:hover, .icon-image:hover { opacity: 0.9; } .icon-livejournal, .icon-yandex, .icon-blogger, .icon-liveinternet, .icon-mailru, .icon-ok, .icon-tumblr, .icon-vk, .icon-youtube, .icon-pinterest, .icon-facebook, .icon-instagram, .icon-twitter, .icon-rutube, .icon-telegram { opacity: 1; transition: opacity 0.3s ease; transform: translateZ(0); } .icon-livejournal:hover, .icon-yandex:hover, .icon-blogger:hover, .icon-liveinternet:hover, .icon-mailru:hover, .icon-ok:hover, .icon-tumblr:hover, .icon-vk:hover, .icon-youtube:hover, .icon-pinterest:hover, .icon-facebook:hover, .icon-instagram:hover, .icon-twitter:hover, .icon-rutube:hover, .icon-telegram:hover { opacity: 0.8; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fix { overflow: hidden; } .alignleft { float: left; margin-right: 15px; } .gpu-accelerated { transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } .slide[aria-hidden="true"] { opacity: 0; pointer-events: none; } .slide[aria-hidden="true"] * { pointer-events: none; } .slide[aria-hidden="false"] { opacity: 1; pointer-events: auto; } .slide[aria-hidden="false"] * { pointer-events: auto; } .btn:focus, .slide-btn:focus, .dot:focus { outline: 2px solid #00d4ff; outline-offset: 2px; } [role="tablist"] { display: flex; gap: 16px; } [role="tab"] { cursor: pointer; border: none; background: rgba(255, 255, 255, 0.4); width: 16px; height: 16px; border-radius: 50%; transition: all 0.3s ease; position: relative; border: 2px solid rgba(255, 255, 255, 0.6); } [role="tab"][aria-selected="true"] { background: white; transform: scale(1.4); border-color: white; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.8); } [role="tab"][aria-selected="false"] { background: rgba(255, 255, 255, 0.4); transform: scale(1); } [role="tab"]:focus { outline: 3px solid #00d4ff; outline-offset: 3px; background: rgba(255, 255, 255, 0.8); transform: scale(1.3); } #slider-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .prev-btn:focus, .next-btn:focus { background: rgba(255, 255, 255, 0.4); transform: translateY(-2px); } /* ========== МЕДИА-ЗАПРОСЫ ========== */ /* max-width */ @media (max-width: 1200px) { .slide h2 { font-size: 3rem; } .slide p { font-size: 1.2rem; } } @media (max-width: 992px) { .header__main-container { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 25px; text-align: center; } .header__logo { justify-self: center; order: 1; } .header__banner { order: 2; justify-self: center; } .header__contacts { text-align: center; justify-self: center; order: 3; } .header__search { justify-content: center; min-width: auto; } .header__title { font-size: 24px; margin-bottom: 12px; } .header__banner-txt p { font-size: 18px; } .header__logo img { max-width: 250px; min-height: 125px; } .header__social-list { gap: 18px; } .header__phone a, .header__email a { min-width: auto; font-size: 2.2rem; } .slide h2 { font-size: 2.5rem; } .slide p { font-size: 1.1rem; } .slide-content { padding: 30px; } .menu-container { display: none; } .mobile-menu-toggle { display: flex; } .mobile-menu-overlay.active, .mobile-menu.active { display: block; } } @media (max-width: 768px) { .header__top-container { grid-template-columns: 1fr; justify-items: center; gap: 15px; } .header__nav-list { justify-content: center; gap: 16px; } .header__nav-list a { font-size: 15px; padding: 4px 0; } .header__social-list { justify-content: center; max-width: 300px; gap: 16px; } .header__social-list img { width: 20px; height: 20px; } .header__main { padding: 20px 0; } .header__main-container { gap: 20px; } .header__title { font-size: 20px; margin-bottom: 10px; letter-spacing: 0.5px; } .header__banner-txt p { font-size: 16px; line-height: 1.5; } .header__phone a { font-size: 20px; } .header__email a { font-size: 20px; } .header__search { flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; } .header__search input { min-width: 250px; padding: 7px 10px; } .header__search button { padding: 7px 20px; width: auto; } .header__logo { justify-self: center; } .header__logo img { max-width: 240px; min-height: 120px; } .slider-container { height: 50vh; } .slide { padding: 20px; } .slide-content { padding: 20px; } .slide h2 { font-size: 2rem; } .slide p { font-size: 1rem; } .slider-controls { bottom: 20px; gap: 15px; } .btn { padding: 10px 16px; font-size: 1.3rem; } .slide-btn { font-size: 1.3rem; } .slider-dots { gap: 14px; padding: 10px 16px; } .dot { width: 14px; height: 14px; } } @media (max-width: 640px) { .slider-container { height: 45vh; } .slide { padding: 15px; } .slide-content { padding: 15px; } .slide h2 { font-size: 1.8rem; margin-bottom: 15px; } .slide p { font-size: 0.9rem; margin-bottom: 15px; } .slider-controls { bottom: 15px; gap: 10px; } .btn { padding: 8px 14px; font-size: 1rem; } .slide-btn { font-size: 1rem; padding: 10px 20px; } .slider-dots { gap: 12px; padding: 8px 14px; } .dot { width: 12px; height: 12px; } } @media (max-width: 480px) { .header__top { padding: 6px 0; } .header__nav-list { flex-direction: column; gap: 9px; text-align: center; } .header__nav-list a { font-size: 15px; } .header__social-list { max-width: 280px; gap: 14px; } .header__social-list img { width: 20px; height: 20px; } .header__main { padding: 15px 0; } .header__main-container { gap: 15px; padding: 0 10px; } .header__title { font-size: 18px; margin-bottom: 8px; } .header__banner-txt p { font-size: 15px; line-height: 1.4; } .header__phone a { font-size: 18px; } .header__email a { font-size: 18px; } .header__search { width: 100%; max-width: 280px; } .header__search input { min-width: 200px; width: 100%; padding: 6px 10px; font-size: 13px; } .header__search button { padding: 6px 15px; font-size: 13px; } .header__logo img { max-width: 220px; min-height: 110px; } .slider-container { height: 40vh; } .slide { padding: 10px; } .slide-content { padding: 15px; } .slide h2 { font-size: 1.5rem; margin-bottom: 10px; } .slide p { font-size: 0.8rem; margin-bottom: 10px; } .slider-controls { bottom: 10px; flex-wrap: wrap; gap: 8px; } .btn { padding: 6px 12px; font-size: 0.9rem; } .slide-btn { font-size: 0.9rem; padding: 8px 16px; } .slider-dots { gap: 10px; padding: 6px 12px; } .dot { width: 10px; height: 10px; border-width: 1.5px; } } /* min-width */ @media (min-width: 1200px) { .header__top-container, .header__main-container { padding: 0 20px; } } @media (min-width: 1400px) { .header__top-container, .header__main-container { max-width: 1320px; } } @media (min-width: 1600px) { .header__top-container, .header__main-container { max-width: 1500px; } .header__title { font-size: 30px; } .header__banner-txt p { font-size: 17px; } } /* Функциональные медиа-запросы */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .header__logo img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } } @media (prefers-reduced-motion: no-preference) { .header__logo img, .header__nav-list a, .header__social-list img, .header__search button { transition: all 0.3s ease; } } @media (prefers-contrast: more) { .header__top { background-color: #000000; border-bottom-color: #000000; } .header__nav-list a { color: #ffffff; } .header__title { color: #000000; } .header__banner-txt p { color: #ff0000; } } @media (prefers-color-scheme: dark) { .header__main { background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%); } .header__title { color: #ffffff; } .header__banner-txt p { color: #ff6b6b; } .header__phone a { color: #ffffff; } .header__email a { color: #cccccc; } .header__search input { background-color: #3d3d3d; color: #ffffff; border-color: #4d5b8a; } .header__search input::placeholder { color: #999; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .slide { transition: none; } .timer-progress { transition: none; } .dot.active::after { animation: none; } } /* ========== BOOTSTRAP ========== */ *,:after,:before{box-sizing:border-box} html{font-size:10px;-webkit-tap-highlight-color:transparent} body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;margin:0} a{color:#337ab7;text-decoration:none} a:focus,a:hover{color:#23527c;text-decoration:underline} img{border:0;vertical-align:middle} .img-responsive{display:block;max-width:100%;height:auto} .img-rounded{border-radius:6px} .img-circle{border-radius:50%} .img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;transition:all .2s ease-in-out} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} [role=button]{cursor:pointer} .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-top:20px;margin-bottom:10px} .h1,h1{font-size:36px} .h2,h2{font-size:30px} .h3,h3{font-size:24px} .h4,h4{font-size:18px;margin-top:10px} .h5,h5{font-size:14px;margin-top:10px} .h6,h6{font-size:12px;margin-top:10px} p{margin:0 0 10px} .text-left{text-align:left} .text-right{text-align:right} .text-center{text-align:center} .text-muted{color:#777} .text-primary{color:#337ab7} .bg-primary{color:#fff;background-color:#337ab7} .bg-success{background-color:#dff0d8} .bg-info{background-color:#d9edf7} .bg-warning{background-color:#fcf8e3} .bg-danger{background-color:#f2dede} .container,.container-fluid{margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px} @media (min-width:769px){.container{width:750px}} @media (min-width:992px){.container{width:970px}} @media (min-width:1200px){.container{width:1195px}} .row{margin-right:-15px;margin-left:-15px} .col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px} .col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left} .col-xs-12{width:100%} .col-xs-11{width:91.66666667%} .col-xs-10{width:83.33333333%} .col-xs-9{width:75%} .col-xs-8{width:66.66666667%} .col-xs-7{width:58.33333333%} .col-xs-6{width:50%} .col-xs-5{width:41.66666667%} .col-xs-4{width:33.33333333%} .col-xs-3{width:25%} .col-xs-2{width:16.66666667%} .col-xs-1{width:8.33333333%} @media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left} .col-sm-12{width:100%} .col-sm-11{width:91.66666667%} .col-sm-10{width:83.33333333%} .col-sm-9{width:75%} .col-sm-8{width:66.66666667%} .col-sm-7{width:58.33333333%} .col-sm-6{width:50%} .col-sm-5{width:41.66666667%} .col-sm-4{width:33.33333333%} .col-sm-3{width:25%} .col-sm-2{width:16.66666667%} .col-sm-1{width:8.33333333%}} @media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left} .col-md-12{width:100%} .col-md-11{width:91.66666667%} .col-md-10{width:83.33333333%} .col-md-9{width:75%} .col-md-8{width:66.66666667%} .col-md-7{width:58.33333333%} .col-md-6{width:50%} .col-md-5{width:41.66666667%} .col-md-4{width:33.33333333%} .col-md-3{width:25%} .col-md-2{width:16.66666667%} .col-md-1{width:8.33333333%}} @media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left} .col-lg-12{width:100%} .col-lg-11{width:91.66666667%} .col-lg-10{width:83.33333333%} .col-lg-9{width:75%} .col-lg-8{width:66.66666667%} .col-lg-7{width:58.33333333%} .col-lg-6{width:50%} .col-lg-5{width:41.66666667%} .col-lg-4{width:33.33333333%} .col-lg-3{width:25%} .col-lg-2{width:16.66666667%} .col-lg-1{width:8.33333333%}} .pull-right{float:right!important} .pull-left{float:left!important} .hide{display:none!important} .show{display:block!important} .hidden-xs{display:none!important} @media (max-width:768px){.visible-xs{display:block!important} .visible-xs-block{display:block!important} .hidden-xs{display:block!important}} @media (min-width:769px) and (max-width:991px){.visible-sm{display:block!important} .visible-sm-block{display:block!important} .hidden-sm{display:none!important}} @media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important} .visible-md-block{display:block!important} .hidden-md{display:none!important}} @media (min-width:1200px){.visible-lg{display:block!important} .visible-lg-block{display:block!important} .hidden-lg{display:none!important}} .clearfix:after,.clearfix:before,.row:after,.row:before{display:table;content:" "} .clearfix:after,.row:after{clear:both}