feat: перенос vin в компоненты, добавление логики и исправления
This commit is contained in:
egortriston
@ -10,7 +10,7 @@ const CatalogSubscribe: React.FC = () => (
|
||||
<div className="form-block-3 w-form">
|
||||
<form className="form-3" onSubmit={e => e.preventDefault()}>
|
||||
<input className="text-field-3 w-input" maxLength={256} name="name-6" placeholder="Введите E-mail" type="text" id="name-6" />
|
||||
<input type="submit" className="submit-button w-button" value="Подписаться" />
|
||||
<input type="submit" className="submit-button-copy w-button" value="Подписаться" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
39
src/components/vin/InfoVin.tsx
Normal file
39
src/components/vin/InfoVin.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
|
||||
const InfoVin = () => (
|
||||
<section className="section-info">
|
||||
<div className="w-layout-blockcontainer container info w-container">
|
||||
<div className="w-layout-vflex flex-block-9">
|
||||
<div className="w-layout-hflex flex-block-7">
|
||||
<a href="#" className="link-block w-inline-block">
|
||||
<div>Главная</div>
|
||||
</a>
|
||||
<div className="text-block-3">→</div>
|
||||
<a href="#" className="link-block w-inline-block">
|
||||
<div>Оригинальный каталог</div>
|
||||
</a>
|
||||
<div className="text-block-3">→</div>
|
||||
<a href="#" className="link-block-2 w-inline-block">
|
||||
<div>Audi Q7</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-8">
|
||||
<div className="w-layout-hflex flex-block-10">
|
||||
<h1 className="heading">Audi Q7</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-hflex flex-block-112">
|
||||
<div className="text-block-55">WAUZZZ4M6JD010702 · 2018 · SUQ(8A) · CVMD · 3000CC / 249hp / 183kW TDI CR</div>
|
||||
<div className="w-embed">
|
||||
{/* SVG icon */}
|
||||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default InfoVin;
|
||||
9
src/components/vin/KnotIn.tsx
Normal file
9
src/components/vin/KnotIn.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
const KnotIn = () => (
|
||||
<div className="knotin">
|
||||
<img src="/images/image-44.jpg" loading="lazy" alt="" className="image-26" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default KnotIn;
|
||||
43
src/components/vin/KnotParts.tsx
Normal file
43
src/components/vin/KnotParts.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
const parts = [
|
||||
{ n: 1, oem: "059198405B", name: "Фильтрующий элемент с проклад." },
|
||||
{ n: 2, oem: "N 10196103", name: "Винт с цилиндр. скруглённой головкой Torx" },
|
||||
{ n: 3, oem: "059117070J", name: "Уплотнитель" },
|
||||
{ n: 4, oem: "N 10124306", name: "Винт с плоской головкой и внутренним Torx" },
|
||||
{ n: 5, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 6, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 7, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 8, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 9, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 10, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 11, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 12, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 13, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 14, oem: "059117015K", name: "Масляный радиатор" },
|
||||
{ n: 15, oem: "059117015K", name: "Масляный радиатор" },
|
||||
];
|
||||
|
||||
const KnotParts = () => (
|
||||
<div className="knot-parts">
|
||||
{parts.map((part, idx) => (
|
||||
<div className="w-layout-hflex knotlistitem" key={idx}>
|
||||
<div className="w-layout-hflex flex-block-116">
|
||||
<div className="nuberlist">{part.n}</div>
|
||||
<div className="oemnuber">{part.oem}</div>
|
||||
</div>
|
||||
<div className="partsname">{part.name}</div>
|
||||
<div className="w-layout-hflex flex-block-117">
|
||||
<a href="#" className="button-3 w-button">Цена</a>
|
||||
<div className="code-embed-16 w-embed">
|
||||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default KnotParts;
|
||||
40
src/components/vin/VinCategory.tsx
Normal file
40
src/components/vin/VinCategory.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
|
||||
const categories = [
|
||||
"Детали для ТО",
|
||||
"Двигатель",
|
||||
"Топливная система",
|
||||
"Система охлаждения",
|
||||
"Система выпуска",
|
||||
"Трансмиссия",
|
||||
"Ходовая часть",
|
||||
"Рулевое управление",
|
||||
"Тормозная система",
|
||||
"Электрооборудование",
|
||||
"Отопление / кондиционирование",
|
||||
"Детали салона",
|
||||
"Детали кузова",
|
||||
"Дополнительное оборудование"
|
||||
];
|
||||
|
||||
interface VinCategoryProps {
|
||||
onCategoryClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const VinCategory: React.FC<VinCategoryProps> = ({ onCategoryClick }) => (
|
||||
<div className="w-layout-vflex flex-block-14-copy-copy">
|
||||
{categories.map((cat, idx) => (
|
||||
<div className="div-block-131" key={idx} onClick={onCategoryClick} style={{ cursor: onCategoryClick ? 'pointer' : undefined }}>
|
||||
<div className="text-block-57">{cat}</div>
|
||||
<div className="w-embed">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default VinCategory;
|
||||
20
src/components/vin/VinKnot.tsx
Normal file
20
src/components/vin/VinKnot.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
|
||||
const VinKnot = () => (
|
||||
<div className="w-layout-vflex flex-block-14-copy-copy">
|
||||
<div className="knotinfo">
|
||||
<img src="/images/image-44.jpg" loading="lazy" alt="" className="image-26" />
|
||||
</div>
|
||||
<div className="knot-img">
|
||||
<h1 className="heading-19">Масляный фильтр с фланцем и масляным радиатором</h1>
|
||||
<div className="w-layout-hflex flex-block-115">
|
||||
<div className="oemnuber">059198405B</div>
|
||||
<div className="partsname">Фильтрующий элемент с проклад.</div>
|
||||
<a href="#" className="button-3 w-button">Показать цены</a>
|
||||
</div>
|
||||
<a href="#" className="showallparts w-button">Показать все</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default VinKnot;
|
||||
88
src/components/vin/VinLeftbar.tsx
Normal file
88
src/components/vin/VinLeftbar.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
const dropdownTitles = [
|
||||
"Детали для ТО",
|
||||
"Двигатель",
|
||||
"Топливная система",
|
||||
"Система охлаждения",
|
||||
"Система выпуска",
|
||||
"Трансмиссия",
|
||||
"Ходовая часть",
|
||||
"Рулевое управление",
|
||||
"Тормозная система",
|
||||
"Электрооборудование",
|
||||
"Отопление / кондиционирование",
|
||||
"Детали салона",
|
||||
"Детали кузова",
|
||||
"Дополнительное оборудование"
|
||||
];
|
||||
|
||||
const VinLeftbar = () => {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||||
|
||||
const handleToggle = (idx: number) => {
|
||||
setOpenIndex(openIndex === idx ? null : idx);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-layout-vflex vinleftbar">
|
||||
<div className="div-block-2">
|
||||
<div className="form-block w-form">
|
||||
<form id="wf-form-search" name="wf-form-search" data-name="search" action="http://search" method="post" className="form" data-wf-page-id="685d5478c4ebd5c8793f8c54" data-wf-element-id="14d3a852-00ba-b161-8849a97059b3785d">
|
||||
<a href="#" className="link-block-3 w-inline-block">
|
||||
<div className="code-embed-6 w-embed">
|
||||
{/* SVG */}
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 17.5L13.8834 13.8833" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
<path d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
<input className="text-field w-input" maxLength={256} name="Search" data-name="Search" placeholder="Поиск по названию детали" type="text" id="Search-4" required />
|
||||
</form>
|
||||
<div className="success-message w-form-done">
|
||||
<div>Thank you! Your submission has been received!</div>
|
||||
</div>
|
||||
<div className="error-message w-form-fail">
|
||||
<div>Oops! Something went wrong while submitting the form.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-vflex flex-block-113">
|
||||
<div className="w-layout-hflex flex-block-114">
|
||||
<a href="#" className="button-3 w-button">Узлы</a>
|
||||
<a href="#" className="button-23 w-button">От производителя</a>
|
||||
</div>
|
||||
{/* Dropdowns start */}
|
||||
{dropdownTitles.map((title, idx) => {
|
||||
const isOpen = openIndex === idx;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
data-hover="false"
|
||||
data-delay="0"
|
||||
className={`dropdown-4 w-dropdown${isOpen ? " w--open" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open" : ""}`}
|
||||
onClick={() => handleToggle(idx)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<div className="w-icon-dropdown-toggle"></div>
|
||||
<div className="text-block-56">{title}</div>
|
||||
</div>
|
||||
<nav className={`dropdown-list-4 w-dropdown-list${isOpen ? " w--open" : ""}`}>
|
||||
<a href="#" className="dropdown-link-3 w-dropdown-link">Link 1</a>
|
||||
<a href="#" className="dropdown-link-3 w-dropdown-link">Link 2</a>
|
||||
<a href="#" className="dropdown-link-3 w-dropdown-link">Link 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* Dropdowns end */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VinLeftbar;
|
||||
76
src/pages/vin-step-2.tsx
Normal file
76
src/pages/vin-step-2.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import Head from "next/head";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import CatalogSubscribe from "@/components/CatalogSubscribe";
|
||||
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
|
||||
import InfoVin from "@/components/vin/InfoVin";
|
||||
import VinLeftbar from "@/components/vin/VinLeftbar";
|
||||
import VinCategory from "@/components/vin/VinCategory";
|
||||
import VinKnot from "@/components/vin/VinKnot";
|
||||
import KnotParts from "@/components/vin/KnotParts";
|
||||
import React, { useState } from "react";
|
||||
import KnotIn from "@/components/vin/KnotIn";
|
||||
|
||||
|
||||
export default function Vin() {
|
||||
const [showKnot, setShowKnot] = useState(false);
|
||||
|
||||
// Обработчик для передачи в VinCategory и для делегирования на .link-2
|
||||
const handleCategoryClick = (e?: React.MouseEvent) => {
|
||||
if (e) e.preventDefault();
|
||||
setShowKnot(true);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
// Делегируем клик на все .link-2 (если они есть на странице)
|
||||
const handler = (e: Event) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains("link-2")) {
|
||||
e.preventDefault();
|
||||
setShowKnot(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", handler);
|
||||
return () => document.removeEventListener("click", handler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>VIN</title>
|
||||
<meta content="vin" property="og:title" />
|
||||
<meta content="vin" property="twitter:title" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta content="Webflow" name="generator" />
|
||||
<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/webflow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/protekproject.webflow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
|
||||
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
|
||||
<link href="images/webclip.png" rel="apple-touch-icon" />
|
||||
</Head>
|
||||
<InfoVin />
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container-vin w-container">
|
||||
<div className="w-layout-hflex flex-block-13">
|
||||
<div className="w-layout-vflex flex-block-14-copy-copy">
|
||||
<KnotIn />
|
||||
<KnotParts />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="section-3">
|
||||
<CatalogSubscribe />
|
||||
</section>
|
||||
<Footer />
|
||||
<MobileMenuBottomSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
74
src/pages/vin.tsx
Normal file
74
src/pages/vin.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import Head from "next/head";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import CatalogSubscribe from "@/components/CatalogSubscribe";
|
||||
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
|
||||
import InfoVin from "@/components/vin/InfoVin";
|
||||
import VinLeftbar from "@/components/vin/VinLeftbar";
|
||||
import VinCategory from "@/components/vin/VinCategory";
|
||||
import VinKnot from "@/components/vin/VinKnot";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default function Vin() {
|
||||
const [showKnot, setShowKnot] = useState(false);
|
||||
|
||||
// Обработчик для передачи в VinCategory и для делегирования на .link-2
|
||||
const handleCategoryClick = (e?: React.MouseEvent) => {
|
||||
if (e) e.preventDefault();
|
||||
setShowKnot(true);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
// Делегируем клик на все .link-2 (если они есть на странице)
|
||||
const handler = (e: Event) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains("link-2")) {
|
||||
e.preventDefault();
|
||||
setShowKnot(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", handler);
|
||||
return () => document.removeEventListener("click", handler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>VIN</title>
|
||||
<meta content="vin" property="og:title" />
|
||||
<meta content="vin" property="twitter:title" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<meta content="Webflow" name="generator" />
|
||||
<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/webflow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/css/protekproject.webflow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect" />
|
||||
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
|
||||
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
|
||||
<link href="images/webclip.png" rel="apple-touch-icon" />
|
||||
</Head>
|
||||
<InfoVin />
|
||||
<section className="main">
|
||||
<div className="w-layout-blockcontainer container-vin w-container">
|
||||
<div className="w-layout-hflex flex-block-13">
|
||||
<VinLeftbar />
|
||||
{/* Категории или Knot */}
|
||||
{showKnot ? (
|
||||
<VinKnot />
|
||||
) : (
|
||||
<VinCategory onCategoryClick={handleCategoryClick} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="section-3">
|
||||
<CatalogSubscribe />
|
||||
</section>
|
||||
<Footer />
|
||||
<MobileMenuBottomSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -374,4 +374,25 @@ input.input-receiver:focus {
|
||||
|
||||
.core-product-s1 {
|
||||
max-width: 320px ;
|
||||
}
|
||||
|
||||
.flex-block-112 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
color: var(--red);
|
||||
margin-top: 10px;
|
||||
}
|
||||
.text-block-55 {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
}
|
||||
|
||||
.knotin {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.knotin img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: contain; /* или cover */
|
||||
}
|
||||
@ -5399,10 +5399,6 @@ body {
|
||||
--_fonts---font-size--supersmall: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1580px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
}
|
||||
@ -5431,14 +5427,22 @@ body {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.topmenuh {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.flex-block-4 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
}
|
||||
|
||||
.button_h {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.form-block {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.text-field {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.flex-block-12 {
|
||||
@ -5474,6 +5478,14 @@ body {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.flex-block-30 {
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
.news {
|
||||
min-width: 310px;
|
||||
}
|
||||
|
||||
.core-product-search {
|
||||
flex-flow: row;
|
||||
}
|
||||
@ -5642,11 +5654,6 @@ body {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.flex-block-6-copy-copy {
|
||||
flex-flow: wrap;
|
||||
height: 470px;
|
||||
}
|
||||
|
||||
.flex-block-99 {
|
||||
max-width: 50%;
|
||||
}
|
||||
@ -5672,6 +5679,48 @@ body {
|
||||
.rightbi {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.topmenub {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.vinleftbar {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.knotinfo {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.image-26 {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.knotin {
|
||||
flex: 1;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.heading-20 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.flex-block-119 {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.bestpriceitem.end {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
width: 540px;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
margin-bottom: -218px;
|
||||
margin-left: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
@ -5680,15 +5729,35 @@ body {
|
||||
}
|
||||
|
||||
.flex-block {
|
||||
display: flex;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-arrow {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.icon-2 {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.flex-block-5 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.flex-block-6 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
grid-template: ". . ."
|
||||
". Area Area"
|
||||
/ 1fr 1fr 1fr;
|
||||
grid-template: "."
|
||||
"."
|
||||
/ 1fr 1fr 1fr 1fr;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
place-items: start stretch;
|
||||
@ -5711,14 +5780,37 @@ body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-block-24 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
padding: 40px 30px 40px 40px;
|
||||
}
|
||||
|
||||
.select {
|
||||
height: 48px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.div-block-10 {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.div-block-12 {
|
||||
min-width: 240px;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.div-block-12.small {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: -25px;
|
||||
}
|
||||
|
||||
.core-product {
|
||||
@ -5769,7 +5861,7 @@ body {
|
||||
|
||||
.core-product-s1 {
|
||||
flex-flow: column;
|
||||
max-width: 320px ;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.core-product-search-s2 {
|
||||
@ -5795,6 +5887,14 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.div-block-34 {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.heading-17 {
|
||||
font-size: 64px;
|
||||
}
|
||||
@ -5824,6 +5924,20 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.div-block-12-copy {
|
||||
min-width: 240px;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.div-block-123 {
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.div-block-red.small {
|
||||
min-width: 240px;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.image-22 {
|
||||
object-fit: contain;
|
||||
object-position: 100% 100%;
|
||||
@ -5842,6 +5956,7 @@ body {
|
||||
}
|
||||
|
||||
.div-block-127 {
|
||||
border: 1px solid var(--_icon---light-blue-grey);
|
||||
color: var(--_icon---light-blue-grey);
|
||||
border-radius: 50px;
|
||||
justify-content: center;
|
||||
@ -5872,6 +5987,88 @@ body {
|
||||
padding-top: 5px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.favcardcat {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabson {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.indexbrandblock:hover {
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
.arbd {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.catnav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.knotinfo {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.knotin {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.brandsortb {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
padding: 40px 30px 40px 40px;
|
||||
}
|
||||
|
||||
.flex-block-119 {
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
.bestpriceitem.end {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-122 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.inbt {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
background-position: 180px, 0 0;
|
||||
width: 620px;
|
||||
}
|
||||
|
||||
.select-copy {
|
||||
height: 48px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.div-block-10-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
margin-left: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
@ -5885,7 +6082,7 @@ body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.top_head, .bottom_head {
|
||||
.top_head, .topmenuh {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
@ -6004,9 +6201,29 @@ body {
|
||||
}
|
||||
|
||||
.news {
|
||||
min-width: 320px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
min-width: 223px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.heading_news {
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
}
|
||||
|
||||
.div-block-13 {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.flex-block-32 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-block-33 {
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.flex-block-35 {
|
||||
@ -6099,7 +6316,6 @@ body {
|
||||
|
||||
.product-list-cart {
|
||||
padding-bottom: 10px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.brandname {
|
||||
@ -6588,6 +6804,11 @@ body {
|
||||
min-width: 340px;
|
||||
}
|
||||
|
||||
.flex-block-6-copy-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
|
||||
.mask {
|
||||
height: auto;
|
||||
}
|
||||
@ -6656,6 +6877,77 @@ body {
|
||||
height: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.topmenub {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.tb, .tb.nav, .tb.info {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.tb.subscribe, .tb.footer {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.batd, .batd.nav, .batd.info {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.batd.subscribe, .batd.footer {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.catnav {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.vinleftbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-vin, .container-vin.nav, .container-vin.info {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-vin.subscribe, .container-vin.footer {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
min-width: 220px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.flex-block-123 {
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.container-copy, .container-copy.nav, .container-copy.info {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-copy.subscribe, .container-copy.footer {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@ -6677,9 +6969,13 @@ body {
|
||||
--_fonts---font-size--supersmall: 10px;
|
||||
}
|
||||
|
||||
.container.info {
|
||||
.container {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.container.info {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.container.footer {
|
||||
@ -6687,7 +6983,6 @@ body {
|
||||
}
|
||||
|
||||
.brand {
|
||||
width: 180px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
@ -6695,11 +6990,21 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex-block, .flex-block-2 {
|
||||
.flex-block {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
|
||||
.flex-block-2 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.top_head {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
padding: 12px;
|
||||
}
|
||||
@ -6747,13 +7052,18 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-8 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.flex-block-9, .flex-block-10 {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
--_fonts---font-family: Onest, sans-serif;
|
||||
--_fonts---color--dark-blue: #0d336c;
|
||||
@ -6791,6 +7101,8 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-13 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
@ -6870,6 +7182,10 @@ body {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.news {
|
||||
min-width: 244px;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
display: none;
|
||||
}
|
||||
@ -7375,7 +7691,17 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add-to-cart-block-s1, .add-to-cart-block-copy, .add-to-cart-block-copy {
|
||||
.add-to-cart-block-s1 {
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-block-14-copy-copy {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.add-to-cart-block-copy {
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
@ -7398,6 +7724,10 @@ body {
|
||||
padding: 20px 30px 75px;
|
||||
}
|
||||
|
||||
.image-24 {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.text-block-14-copy {
|
||||
align-self: stretch;
|
||||
display: block;
|
||||
@ -7454,6 +7784,74 @@ body {
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
height: auto;
|
||||
top: 72px;
|
||||
}
|
||||
|
||||
.searcj {
|
||||
align-self: stretch;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.tb {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.tb.info {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.tb.footer {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.batd {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.batd.info {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.batd.footer {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.container-vin.info {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.container-vin.footer {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.inbt, .news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
|
||||
.container-copy {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.container-copy.info {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.container-copy.footer {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 479px) {
|
||||
@ -7479,7 +7877,7 @@ body {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 30px;
|
||||
padding-top: 20px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
@ -7523,7 +7921,7 @@ body {
|
||||
grid-row-gap: 15px;
|
||||
}
|
||||
|
||||
.top_head, .bottom_head {
|
||||
.top_head, .topmenuh {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@ -7558,8 +7956,8 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-8 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.flex-block-9, .flex-block-10 {
|
||||
@ -7591,6 +7989,8 @@ body {
|
||||
}
|
||||
|
||||
.flex-block-11 {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
flex-flow: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
@ -7790,7 +8190,7 @@ body {
|
||||
.news {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
min-width: 260px;
|
||||
min-width: 250px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -8432,7 +8832,6 @@ body {
|
||||
|
||||
.flex-block-48-copy {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sort-list-s1 {
|
||||
@ -8472,7 +8871,7 @@ body {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 0;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@ -8570,6 +8969,13 @@ body {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.flex-block-6-copy-copy {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.heading-17 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
@ -8624,11 +9030,6 @@ body {
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.submit-button-copy {
|
||||
align-self: stretch;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.image-thx {
|
||||
min-width: 260px;
|
||||
min-height: 300px;
|
||||
@ -8686,9 +9087,263 @@ body {
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.fsfav, .favcardcat {
|
||||
.fsfav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.favcardcat {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
margin-left: 0;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
.topmenub {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.tb {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 20px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.tb.nav {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.tb.info {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.tb.subscribe {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.tb.footer {
|
||||
padding: 40px 0 90px;
|
||||
}
|
||||
|
||||
.batd {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 20px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.batd.nav {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.batd.info {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.batd.subscribe {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.batd.footer {
|
||||
padding: 40px 0 90px;
|
||||
}
|
||||
|
||||
.saletag {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.catnav {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.div-block-131 {
|
||||
min-width: 120px;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.text-block-57 {
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 20px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-vin.nav {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-vin.info {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-vin.subscribe {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.container-vin.footer {
|
||||
padding: 40px 0 90px;
|
||||
}
|
||||
|
||||
.knot-img {
|
||||
min-width: 120px;
|
||||
min-height: 140px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.knotinfo {
|
||||
max-width: 320px;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.heading-19 {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.flex-block-115 {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.knotin {
|
||||
max-width: 320px;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.knot-parts {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
min-width: 120px;
|
||||
min-height: 140px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.knotlistitem {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.brandsortb {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
padding-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
min-width: 135px;
|
||||
max-width: 190px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.pricecartbp {
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.nameitembp {
|
||||
max-height: 36px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.saletagbp {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.imgitembp {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.submit-button-copy {
|
||||
align-self: stretch;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.supportheading {
|
||||
font-size: var(--_fonts---font-size--heading-2);
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.select-copy {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.container-copy {
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 20px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-copy.nav {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-copy.info {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container-copy.subscribe {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.container-copy.footer {
|
||||
padding: 40px 0 90px;
|
||||
}
|
||||
}
|
||||
|
||||
#w-node-bc394713-4b8e-44e3-8ddf-3edc1c31a743-3b3232bc {
|
||||
@ -8717,4 +9372,810 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.flex-block-113 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex: 0 auto;
|
||||
align-self: stretch;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button-3 {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---primary);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-3:hover {
|
||||
background-color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.button-23 {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-23:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.flex-block-114 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
align-self: stretch;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dropdown-4 {
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3 {
|
||||
border-top-right-radius: var(--_round---normal);
|
||||
border-bottom-right-radius: var(--_round---normal);
|
||||
border-left: 2px solid #0000;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 6px 15px;
|
||||
}
|
||||
|
||||
.dropdown-toggle-3:hover {
|
||||
border-left: 2px solid var(--red);
|
||||
}
|
||||
|
||||
.dropdown-toggle-3:active {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.dropdown-list-4 {
|
||||
background-color: #0000;
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 25px;
|
||||
display: none;
|
||||
position: static;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.dropdown-link-3 {
|
||||
color: var(--_fonts---color--black);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.dropdown-link-3:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.text-block-56 {
|
||||
color: var(--_fonts---color--black);
|
||||
}
|
||||
|
||||
.div-block-131 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
min-width: 230px;
|
||||
min-height: 180px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.div-block-131:hover {
|
||||
background-color: var(--light-blue);
|
||||
color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.text-block-57 {
|
||||
color: var(--_fonts---color--black);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vinleftbar {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: none;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.container-vin {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-bottom: 60px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 40px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-vin.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.container-vin.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.container-vin.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-vin.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.knot-img {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 320px;
|
||||
min-height: 180px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knotinfo {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 240px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading-19 {
|
||||
color: var(--_fonts---color--black);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.partsname {
|
||||
flex: 1;
|
||||
max-width: 240px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.oemnuber {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.flex-block-115 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.showallparts {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.showallparts:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.image-26 {
|
||||
object-fit: contain;
|
||||
flex: 0 auto;
|
||||
align-self: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.knotin {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--red);
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 480px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knot-parts {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 320px;
|
||||
min-height: 180px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nuberlist {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.knotlistitem {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.code-embed-16 {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.code-embed-16:hover {
|
||||
color: var(--_button---primary);
|
||||
}
|
||||
|
||||
.flex-block-116 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
}
|
||||
|
||||
.flex-block-117 {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 15px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brandsort {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex-flow: wrap;
|
||||
align-self: stretch;
|
||||
height: 148px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brandsortb {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.flex-block-118 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
border-radius: var(--_round---big-20);
|
||||
background-image: url('/images/Group-601.png'), linear-gradient(13deg, #0d336c, #182334);
|
||||
background-position: 100px, 0 0;
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-size: cover, auto;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.heading-20 {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---h1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.text-block-58 {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-24 {
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--_button---color);
|
||||
color: var(--_fonts---color--black);
|
||||
padding: 14px 30px;
|
||||
}
|
||||
|
||||
.button-24:hover {
|
||||
background-color: var(--_button---primary);
|
||||
color: var(--_fonts---color--white);
|
||||
}
|
||||
|
||||
.flex-block-119 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
width: 560px;
|
||||
}
|
||||
|
||||
.bestpriceitem {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--white);
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 196px;
|
||||
max-width: 196px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.bestpriceitem:hover {
|
||||
box-shadow: 0 0 15px #0000004d;
|
||||
}
|
||||
|
||||
.bestpriceitem.end {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pricecartbp {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.actualprice {
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.oldpricebp {
|
||||
color: var(--_fonts---color--light-blue-grey);
|
||||
font-size: var(--_fonts---font-size--supersmall);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.flex-block-120 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.nameitembp {
|
||||
flex: 0 auto;
|
||||
align-self: auto;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.saletagbp {
|
||||
border-radius: var(--_round---small-8);
|
||||
background-color: var(--green);
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---font-size--supersmall);
|
||||
padding: 3px 5px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.imgitembp {
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-height: 160px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-121 {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.flex-block-122 {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.inbt {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.div-block-132 {
|
||||
border-radius: var(--_round---big-20);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-block-123 {
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 40px;
|
||||
}
|
||||
|
||||
.submit-button-copy {
|
||||
border-radius: var(--_round---normal);
|
||||
background-color: var(--_button---primary);
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
padding: 16px 30px;
|
||||
}
|
||||
|
||||
.submit-button-copy.fill {
|
||||
font-size: var(--_fonts---font-size--core);
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.supportheading {
|
||||
color: var(--_fonts---color--white);
|
||||
font-size: var(--_fonts---h1);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.div-block-133 {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-block-54-copy {
|
||||
color: var(--_fonts---color--black);
|
||||
flex: 1;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ci2 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item2.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci3 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item3.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci4 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item4.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci5 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item5.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci6 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item6.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci7 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item7.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci8 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item8.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ci9 {
|
||||
border-radius: var(--_round---big-20);
|
||||
background-color: var(--white);
|
||||
background-image: url('/images/catalog_item9.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-5-copy {
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex-block-124 {
|
||||
grid-column-gap: 30px;
|
||||
grid-row-gap: 30px;
|
||||
border-radius: var(--_round---big-20);
|
||||
/* background-image: url('/images/carvin.png'), linear-gradient(45deg, #1b283b, #0d336c);
|
||||
background-position: 150px, 0 0; */
|
||||
background-repeat: no-repeat, repeat;
|
||||
background-size: auto, auto;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
align-items: flex-start;
|
||||
width: 440px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.heading-21 {
|
||||
color: var(--_fonts---color--white);
|
||||
flex: 0 auto;
|
||||
align-self: stretch;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.button-3-copy {
|
||||
border-radius: var(--_button---round-12px);
|
||||
background-color: var(--_button---primary);
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-3-copy:hover {
|
||||
background-color: var(--_button---hover-red);
|
||||
}
|
||||
|
||||
.select-copy {
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: var(--_round---supersmall-4);
|
||||
background-color: var(--white);
|
||||
color: var(--_fonts---color--grey);
|
||||
width: 180px;
|
||||
height: 46px;
|
||||
margin-bottom: 0;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.div-block-10-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image-27 {
|
||||
width: 160px;
|
||||
margin-bottom: -232px;
|
||||
margin-left: 600px;
|
||||
}
|
||||
|
||||
.news-index-block-copy {
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.container-copy {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-width: 1580px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-copy.nav {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.container-copy.info {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.container-copy.subscribe {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.container-copy.footer {
|
||||
background-color: var(--back);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.div-block-134 {
|
||||
border: 1px solid var(--_fonts---color--light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
border-radius: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.div-block-134:hover {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.code-embed-17 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.div-block-134-copy {
|
||||
border: 1px solid var(--_fonts---color--light-blue);
|
||||
color: var(--_fonts---color--black);
|
||||
border-radius: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.div-block-134-copy:hover {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.flex-block-125 {
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.div-block-135 {
|
||||
background-color: var(--light-blue);
|
||||
border-radius: 40px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.div-block-135:hover {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.flex-block-126 {
|
||||
grid-column-gap: 4px;
|
||||
grid-row-gap: 4px;
|
||||
justify-content: flex-start;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user