img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --main-bg: #fff; --light: #f5f5f5; --light-comp: #4d4d4d; --dark: #0d1539; --dark-comp: #fff; --primary: #273259; --primary-comp: #fff; --secondary: #546bbf; --secondary-comp: #fff; --accent: #1ba2b6; --dark-accent: #1ba2b6; --warning: #A30404; --merica: #DA291C } html, body { min-width: 320px; } * { scroll-behavior: smooth; box-sizing: border-box } body, form :is(input, textarea, select) { font-family: 'Montserrat', 'Montserrat-fallback' } body { font-size: 18px; line-height: 1.6; text-align: center; min-width: 320px; } body, nav a { color: var(--light-comp, #4d4d4d); } body, header ul, .hero h1, .hero p { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1, h2, h3, h4, h5, h6 { color: var(--primary); } img, iframe, svg { max-width: 100%; height: auto; display: block; margin: 0 auto } iframe { display: block; aspect-ratio: auto 16 / 9; width: 100%; } .youtube { margin: 0 auto !important } a img, iframe { border: none; } a, .row1 h3, .row3 img { transition: ease-in-out .3s; } a, header a:hover, form input[type=submit]:hover, .btn:hover, .admin a:hover, .cartbtn:hover { text-decoration: none; } a, nav a:hover { color: var(--secondary); } a:hover { text-decoration: underline; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 10px 4% 2% 0; } .imgRight { float: right; margin: 10px 0 2% 4%; } .clear { clear: both; } .nowrap, a[href^=tel] { white-space: nowrap; } sup { line-height: 0; } .hide { display: none !important; } .center, .ccpaNotice, .hero h1, .hero p { text-align: center; } .wrap { display: block; max-width: 1180px; margin: 0 auto; position: relative; } .bg-dark, .bg-dark a, .bg-primary, .bg-primary a, .top a:hover, .hero h1, .hero p, .tips h2, .comments h2 { color: var(--dark-comp, #fff); } .bg-dark, .tips .btn { background-color: var(--dark); } .btnGroup { display: flex; flex-flow: row wrap; } .btnGroup .btn { margin: 1em; flex: 0 0 auto; } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-light { background-color: var(--light, #f5f5f5); color: var(--light-comp, #4d4d4d); } .mid { align-items: center; align-self: center; } .grid { display: grid; grid-gap: 15px clamp(15px, 3vw, 40px); } .grid.half { grid-template-columns: repeat(2, 1fr); } .grid.golden { grid-template-columns: 62% 1fr; } .grid.third { grid-template-columns: repeat(3, 1fr); } .grid.fourth { grid-template-columns: repeat(4, 1fr); } .grid.fifth { grid-template-columns: repeat(5, 1fr); } .grid.sixth { grid-template-columns: repeat(6, 1fr); } .grid.twoThird { grid-template-columns: 8fr 2fr; } .grid.small { grid-template-columns: 2fr 8fr; } .flex { display: flex; flex-wrap: wrap; } .row { flex-direction: row; } .column { flex-direction: column; } .bgimg { position: relative } .bgimg>img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; object-position: 50% 20% } .bgimg .wrap { z-index: 2; position: relative } .pad { padding: 0 10px } header { box-shadow: #0d1539 0 0 20px; z-index: 999; position: relative; background-color: #fff; } header .grid { grid-template-columns: 220px 1fr; } header ul { text-align: right; } header ul:last-child { text-align: right; } header li { display: inline-block; vertical-align: bottom } header a { margin: 5px; padding: 5px; display: block } .social-links { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; } .social-links a { margin: 0; padding: 3px; border: 0.5px solid #e0e0e0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .social-links a:hover { border-color: #b0b0b0; background-color: rgba(0, 0, 0, 0.05); } .social-links img, .social-links svg { width: 20px !important; height: 20px !important; } nav ul { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; } nav li.social-links { margin-left: 4px; } .epHeader { background-color: var(--secondary); color: var(--secondary-comp) !important; border-radius: 4px; padding: 5px 8px !important; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 5px; } .epHeader svg { flex-shrink: 0; } .epHeader:hover { background-color: var(--primary); color: var(--primary-comp) !important; text-decoration: none; } .top, footer, .featured { font-size: 16px; } .grid.topnav { grid-gap: 10px; grid-template-columns: 1fr auto auto; padding: 10px 10px 0 } form.sitesearch { grid-gap: 10px; grid-template-columns: 1fr 100px; max-width: 500px; display: grid; margin: 0 } form.sitesearch input { margin: 0; padding: 8px 10px; } header .sitesearch button { background-color: var(--light); color: var(--primary); padding: 5px 0 6px; border-radius: 3px; border: none } .hero { background-size: cover; background-position: center; position: relative; padding: 10px 0 } .hero:before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .hero { width: 100%; position: relative; } .hero h1, .hero p { padding: 0 10px; text-shadow: 2px 2px 3px rgba(0, 0, 0, .3); } .hero h2 { font-size: 32px; line-height: 1.3; text-align: center; color: var(--light); text-shadow: #0d1539 0 0 5px; } .hero form { max-width: 600px; display: block; margin: 0 auto; padding: 0 15px; } details { text-align: left; border: 1px solid #f5f5f5; padding: 20px; } details summary { font-weight: bold; } .home>div { padding: 40px 0 50px; } .tips h2 { margin-bottom: 10px; } .tips .grid { grid-template-columns: 1fr 250px; } .dealer-program { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 20px; background: rgba(255,255,255,0.12); border-left: 4px solid var(--dark-comp, #fff); border-radius: 4px; color: var(--dark-comp, #fff); font-size: 1.05em; } .dealer-program .dealer-icon { font-size: 1.4em; flex-shrink: 0; color: #ffd700; } .dealer-program a { color: inherit; text-decoration: none; } .dealer-program a:hover { text-decoration: underline; } .featured .grid ul { grid-gap: 0 20px; } .brands a:hover { text-decoration: none; } .marquee { display: flex; user-select: none; gap: 10px; animation: scroll-x 45s linear infinite; align-items: center } .marquee img { max-width: 200px; height: 80px; margin: 0 40px; object-fit: contain; width: auto; } form { margin: 20px 0; } form .grid { grid-gap: 0 10px; } form label { display: block; text-align: left } form :is(input, textarea, select) { padding: 10px; border-radius: 3px; background-color: var(--light); margin-bottom: 10px; border: none; width: 100%; box-sizing: border-box; font-size: 16px } form textarea { height: 150px; } form input[type=submit], .btn { display: inline-block; min-width: 110px; text-align: center; line-height: 1.5; background-color: var(--primary); color: var(--primary-comp); padding: 10px clamp(10px, 3vw, 40px); margin: 10px 0; border: none; transition: ease-in-out .3s; } form input[type=submit] { min-width: 250px; margin: 0; } form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: var(--secondary); } form input, form textarea, ::placeholder { color: var(--dark); } form input[type=submit]:hover, .btn:hover { color: var(--primary-comp); } form input, form textarea { outline: none; } .productCat h2, .productCat p { color: #fff; margin: 0 5%; text-shadow: -1px -1px 1px rgba(255, 255, 255, .1), 1px 1px 1px rgba(0, 0, 0, .5); } .productCat div { display: grid; align-content: center; border-radius: 3px; } .productCatLinks { width: 100%; height: 200px; cursor: pointer; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); transition: all 0.5s ease; position: relative; overflow: hidden } .productCatLinks a:hover { text-decoration: none; } .productCatLinks:after { content: ""; background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); position: absolute; width: 100%; height: 100%; inset: 0; z-index: 1; } .productCatLinks:hover { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } .productCatLinks.bgimg>img:first-of-type { z-index: -1; object-position: 50% 50% } .productCatLinks a { z-index: 2 } #paintaccessories img { object-position: 50% 90% } .productSizes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px 10px; font-weight: bold; } .productSizes img { display: block; height: 250px; width: 250px; overflow: hidden; margin: 10px auto; } footer .wrap { padding: 20px 10px; } .subfoot .grid { grid-template-columns: 1fr 150px; } .subfoot .subfoot-grid { grid-template-columns: 1fr auto 1fr; } .subfoot .subfoot-grid> :last-child { justify-self: end; } .payment-icons { display: flex; gap: 6px; align-items: center; justify-content: center; } .payment-icons svg { width: 38px; height: 24px; border-radius: 4px; } footer hr { margin: 0 0 30px; } .ccpaNotice { background-color: var(--light, #f5f5f5) !important; text-align: center !important; border-color: var(--light, #f5f5f5) !important; } main { padding: 40px 10px; } main h1 { font-size: 32px; } main h2 { font-size: 24px; } main h3 { font-size: 20px; } main h4 { font-size: 18px; } main ul, main ol { padding-left: 25px; } main li { margin: 5px 0; } .nolist, .contact ul { list-style: none; padding-left: 0; } .contact .grid { grid-template-columns: 300px 1fr; margin-top: 30px; } .contact ul { margin: 30px 0; } .a8b-table { border-collapse: collapse; width: 100%; padding: 0; line-height: 1.4; } .a8b-table th, .a8b-table td { padding: 10px; } .a8b-table th { background-color: #0D1539; color: #fff; } .a8b-table td, .a8b-table th { border: 1px solid #eee; } @media(max-width:600px) { .a8b-table td, .a8b-table th { border-top: none; border-bottom: none; } } .addtocart { background-color: var(--primary); color: var(--primary-comp); padding: 10px 10px; border-radius: 3px; margin: auto; border: none; font-size: 14px; } .addtocart:hover { background-color: var(--dark); transition: ease-in-out .3s; text-decoration: none; cursor: pointer; } .banner form label { color: var(--light) } #search select { display: block; margin: auto; padding: 10px } #search .submit:disabled { opacity: 0.5 } form#search label { margin: 8px auto; display: grid; grid-template-columns: 140px 1fr; align-items: center; text-shadow: 1px 1px 1px #000 } #search strong { font-weight: normal; text-align: left; font-size: 1.2em; } #search strong span { font-weight: bold; } #accountDetails { text-align: left; } .howto { text-align: center; display: none; } .howto small { display: block } .help h3 { margin: 0; color: var(--light); background-color: var(--light-comp); text-align: center; padding: 5px; } .help p { margin: 5px 10px; } .help { text-align: center; margin: 0 0 20px 0; line-height: normal; border: 1px solid #4d4d4d; } .sidebar h1 { border-bottom: 1px solid black; } .sidebar details { text-align: left; } .sidebar { display: grid; grid-template-columns: 1fr; } .sticky { position: sticky; top: 100px } .grid.small img { align-self: center; margin: auto; } details { cursor: pointer; } details>details { margin: 10px 0 } details>details, details>details p, details>details li, details p { padding-left: 20px; } details>details li { list-style-position: inside; } .standout { padding: 30px 10px; background-color: var(--primary); color: var(--light) } .product input[name=search], .product select, .product section>label, .shoppingcart input[name=search], .shoppingcart select, .shoppingcart section>label, .shoppingcart input[type=number] { padding: 10px; margin: 10px } .shoppingcart .cart .flex.row input[type=number] { margin: 10px 0; } .clearcoat-warning { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; background-color: #fff3cd; border: 2px solid var(--warning); border-radius: 4px; padding: 16px 20px; margin-bottom: 20px; text-align: left; } .clearcoat-warning-icon { flex-shrink: 0; width: 60px; height: 60px; } .clearcoat-warning p { margin: 0 0 12px; color: var(--dark); } .product input[type=number] { margin: 10px 0; padding: 10px; } .paging ul { display: flex; flex-direction: row; justify-content: space-around; list-style: none; } .product label>a { cursor: pointer; } .pop { color: var(--primary); font-weight: bold; display: block; font-size: 12px; padding: 5px; border-radius: 5px; background-color: var(--light); width: fit-content; text-align: center; } .warning { color: var(--warning) } .required-box { border: 1px solid var(--light); border-left: 3px solid var(--accent); border-radius: 4px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; background: var(--light); font-size: 0.875rem; color: var(--light-comp); } .required-box h3 { margin: 0 0 0.4rem; font-size: 0.875rem; color: var(--primary); } .required-box p { margin: 0 0 0.75rem; } .product-section { margin-bottom: 1.5rem; } .section-title { color: var(--primary); border-bottom: 1px solid var(--light); padding-bottom: 0.25rem; margin-bottom: 0.75rem; } .base-note { display: block; color: #888; font-size: 0.75rem; margin: 0; padding: 0; } .prop65 { font-size: 0.75rem; color: #888; margin: 0.5rem 0 0; text-align: right; } .prop65 a { color: inherit; } .prop65-icon { width: 1em; height: 1em; fill: #b8860b; opacity: 0.75; vertical-align: middle; margin-right: 0.25em; display: inline-block; } .error { display: none; color: var(--warning) } .err { color: var(--warning) } .success { color: var(--primary) } .color { margin: 20px 0; width: 100%; height: 200px; text-wrap: balance } .color small { line-height: normal; display: block; color: #aaa; margin-top: 5px; } .admin .flex.row { justify-content: space-around; } .success { display: none; } .options .flex.column { text-align: left; } .around { justify-content: space-around; } .options .flex.column, .options .flex.column label { margin: 10px 0; } .options .flex.column input { width: 50%; height: 25px } .spinner { animation: spin 2s linear infinite; width: 50%; margin: auto; } .holiday { border: 2px solid #B8200A; padding: 0 20px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); color: #B8200A; text-align: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.1) 100%); } .holiday p { margin-bottom: 0; text-align: center; } .holiday p span { font-weight: bold; display: block; } .holiday h3 { margin-bottom: 0; color: #B8200A; font-size: 36px; text-align: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .prod>div, .prod>a { border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); padding: 20px clamp(10px, 2vw, 20px); } .prod>div>*:not(.btn) { text-align: center; } .prod>div img { height: 220px; object-fit: cover; width: 100%; object-position: 50% 50%; outline: 1px solid #efefef } .prod>div .grid.half img { height: 150px; } .prod>div:has(.cart) { padding-bottom: 120px; position: relative } .prod>div:has(.cart) p:nth-of-type(3) { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0 } .prod .cart { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 100%; box-sizing: border-box; padding: 0 clamp(10px, 2vw, 20px); } .qty { position: absolute; bottom: 25px; background-color: red; border-radius: 10px; width: 15px; height: 15px; text-align: center; padding-bottom: 5px; right: 2px; font-size: 10px; font-weight: bold; } .sitesearch input::placeholder { color: var(--light-comp); } .cart .flex.row button { background-color: #fff; border: none; font-size: 24px; } .cart .flex.row>* { margin: auto; } .checkoutShippingAddress p { margin: 0; padding: 0; line-height: 1.4; } .checkoutShippingAddress .pop { color: inherit; font-size: 1rem; padding: 10px 14px; margin-top: 10px; } input[name=qty]::-webkit-outer-spin-button, input[name=qty]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; -moz-appearance: textfield; appearance: none; } input[name=qty] { text-align: center; border: none } .chip { border: 1px solid black; height: 50px; width: 50px; margin: 0 auto; border-radius: 10px; } .shoppingcart .chip { border-radius: 10px; width: 100%; } .colorChip { border: 1px solid black; height: 100%; width: 100%; margin: 0 auto; border-radius: 10px; } .productview section>label a { display: none; } .productview input[name=search], .productview select, .productview section>label, .productview input[type=number] { padding: 10px; margin: 10px } .productview.add select { width: 100% } .productview.add label { text-align: left; } .productview.add input[type=color] { width: 100%; height: 50px; } .productview.edit select { width: 100% } .productview.edit label { text-align: left; } .productview.edit input[type=color] { width: 100%; height: 50px; } .orders section>label a { display: none; } .orders input[name=search], .orders select, .orders section>label { padding: 10px; margin: 10px } .spinner { width: 10% } .export-box h3 { text-align: center; text-wrap: balance; } .export-box input, .export-box input { padding: 10px; display: inline-block; } .export-box label { display: block; } .options section>label a { display: none; } .options input[name=search], .options select, .options section>label { padding: 10px; margin: 10px } .manufacturers section>label:nth-of-type(1), .manufacturers section>label:nth-of-type(2) { display: none; } .invoice section>label a { display: none; } .invoice input[name=search], .invoice select, .invoice section>label { padding: 10px; margin: 10px } .modelview form label { text-align: left; } .modelview section>label a { display: none; } .modelview input[name=search], .modelview select, .modelview section>label { padding: 10px; margin: 10px } .account form label { font-weight: bold; text-align: left; margin: 5px auto } .categories section>label:nth-of-type(1), .categories section>label:nth-of-type(2) { display: none; } .applications form label { text-align: left; } .coloryear section>label:nth-of-type(1), .coloryear section>label:nth-of-type(2) { display: none; } fieldset { border: none; } .alert { color: var(--warning); font-weight: bold; } .products .prod img { object-fit: cover; width: 300px; height: 200px; } .products table, .product table { border-collapse: collapse; } .prod p:nth-of-type(1), .product .prod p:nth-of-type(1) { margin-top: 5px; padding-top: 0; color: #aaa; font-size: .8em; } .prod p:nth-of-type(2) { font-weight: bold; font-size: 20px; } .prod p:nth-of-type(3) { font-weight: normal; margin-top: 0; padding-top: 10px; } .prod p:nth-of-type(3) strong { font-weight: normal; } .products table th, .product table th { background-color: #0d1539; color: #f5f5f5; border: 1px solid #0d1539; } .products table td .containerdiv { display: grid; grid-template-columns: 50px 1fr; gap: 10px; font-weight: bold; color: var(--light-comp); } .products table td div p { font-weight: bold; } .products table td div.chip { width: 50px; height: 50px; border-radius: 3px; } .product table img { width: 200px; } .product .productImageTitle { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; box-sizing: border-box; margin: 0 0 20px 0; } .product .productImageTitle>div:has(img) { height: 100% } .product .productImageTitle>div:last-of-type { display: block !important; text-align: left; align-items: normal } .productImageTitle>div>img { height: 100%; width: 100%; object-fit: cover; border-right: 1px solid #eee } .product .productImageTitle span { font-weight: bold; } .product .productImageTitle>details { grid-template-columns: 400px 1fr; } form .co-totals { border-radius: 6px; padding: 14px 0; margin-top: 15px; } form .co-items { margin-bottom: 4px; } form .co-item { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 3px 0; font-size: 0.9em; } form .co-items-divider { margin: 8px 0; border: none; border-top: 1px solid #ccc; } form .co-subtotal, form .co-tax, form .co-shipping, form .co-total { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; padding: 4px 0; font-weight: normal; } form .co-subtotal input, form .co-tax input, form .co-shipping input, form .co-total input:not([type=hidden]) { background: none; border: none; padding: 0; margin: 0; height: auto; width: 70px; text-align: right; font-weight: normal; color: inherit; opacity: 1; appearance: textfield; -moz-appearance: textfield; } form .co-subtotal input::-webkit-inner-spin-button, form .co-subtotal input::-webkit-outer-spin-button, form .co-shipping input::-webkit-inner-spin-button, form .co-shipping input::-webkit-outer-spin-button, form .co-tax input::-webkit-inner-spin-button, form .co-tax input::-webkit-outer-spin-button, form .co-total input::-webkit-inner-spin-button, form .co-total input::-webkit-outer-spin-button { -webkit-appearance: none; } form .co-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid #ccc; font-weight: bold; } form .co-total input { font-weight: bold; font-size: 1.1em; } form .co-account { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; line-height: 1; } form .co-account span { cursor: pointer; } nav.paging ul { list-style-type: none; } nav.paging ul li { display: inline-block; } nav.paging ul li button { border: none; background: none; cursor: pointer; } .createAccount { border: none; } .bg-standout { background-color: var(--merica); color: #fff; margin: -25px auto; line-height: 1.6; } .bg-standout p { text-align: center; font-size: 24px; padding: 10px 10px; } .bg-standout span img { display: inline; vertical-align: middle; } .newprod { display: grid; grid-template-columns: 1fr 1fr; } .newprod>div { display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); margin: 10px 0; justify-content: flex-end; } .newprod>div>img { max-width: 100px; width: 100% } .newprod>div>p { flex-direction: column; } .newprod>div .cart { margin-right: 5px; } .left { text-align: left; } .flexwrap { flex-wrap: wrap; padding: 10px } .test { display: grid; grid-template-columns: 1fr !important; gap: 50px; } .extraDetails { cursor: pointer; } .product .extraDetails .flex.row img { margin: 0 } .extraDetails .tip { position: absolute; left: 0; right: 0; display: none; padding: 20px 30px; line-height: 1.5; white-space: normal; z-index: 9998; background-color: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 10px; font-weight: 100; } .extraDetails:hover .tip { display: block; } .paint { justify-content: space-around; } .full-chip { width: 100%; height: 50px; border: 1px solid black; margin-bottom: 20px } .containerdiv p { color: var(--dark) !important; font-size: 18px !important; } a .pill { display: inline-block; background-color: var(--primary); padding: 10px 30px; border-radius: 16px; color: var(--primary-comp); } .notcenter { display: flex; } .accountLogin div { border: 1px solid #eee; border-radius: 5px; padding: 20px; } .instructions .grid div ul li::before { content: counter(step-counter); margin-right: 30px; font-size: 16px; background-color: #273259; color: #eee; font-weight: bold; padding: 5px 10px; border-radius: 3px; } .instructions .grid div ul li { counter-increment: step-counter; margin-bottom: 5px; font-size: 24px; font-weight: bold; } .instructions .grid div ul li p { text-indent: 60px; font-size: 12px; font-weight: normal; margin-top: 0px; } .instructions img { max-width: 90%; } .instructions .grid span { color: #A30404; } .instructions fieldset { border: 1px solid #273259; border-radius: 10px; } .instructions fieldset legend { font-weight: bold; color: #273259; font-size: 32px; text-align: right; text-shadow: 2px 2px 3px rgba(0, 0, 0, .8); } .instructions a { color: #273259; } .instructions a:hover { text-decoration: none; color: #4d4d4d; } .productImageTitle span strong { font-weight: normal; } .prod p { text-align: center; font-weight: bold; } .prod p span { display: block; font-weight: normal; } body .tiny { font-size: 14px !important; margin-bottom: 20px } .offroad { position: relative; } .offroad .bgimg { padding: 20px; } .offroad .bgimg::after { content: ""; background: linear-gradient(rgba(0, 147, 0, 0.5), rgba(0, 147, 0, 0.5)); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; z-index: 1; position: absolute; inset: 0; overflow: hidden; } .offroad .bgimg>img { object-position: top left; } .offroad :is(h3, ul) { position: relative; z-index: 2; color: #fff; text-align: center } a:has(.offroad):hover { text-decoration: none; } .offroad ul { grid-gap: 5px; } .offroad li { margin: 0; } .offroad li a { color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, .7); font-size: 16px; } .offroad h3 { text-shadow: 2px 2px 3px rgba(0, 0, 0, .7); } .offroad li:last-child span { font-weight: bold; text-align: center; } .offroad a:hover { text-decoration: none; } .offroad p { text-align: center; font-style: italic; z-index: 4; background-color: #fff; position: relative; } .springsale { position: relative; } .springsale .bgimg { padding: 20px; } .springsale .bgimg::after { content: ""; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0)); background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; z-index: 1; position: absolute; inset: 0; overflow: hidden; } .springsale .bgimg>img { object-position: top left; } .springsale :is(h3, ul) { position: relative; z-index: 2; color: #fff; text-align: center } a:has(.springsale):hover { text-decoration: none; } .springsale li { margin: 10px 0; text-align: center; } .springsale li a { color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, .7); font-size: 16px; } .springsale h3 { text-shadow: 2px 2px 3px rgba(0, 0, 0, .7); } .springsale li:last-child span { font-weight: bold; text-align: center; } .springsale a:hover { text-decoration: none; } .springsale p { text-align: center; font-style: italic; z-index: 4; background-color: #fff; position: relative; } .holiday-closure { background: linear-gradient(135deg, var(--merica) 0%, var(--primary) 50%, var(--secondary) 100%); padding: 20px 0; } .holiday-box { max-width: 800px; margin: 0 auto; position: relative; padding: 40px 20px; border-radius: 8px; } .holiday-content { position: relative; z-index: 2; color: #fff; text-align: center; } .holiday-content h2 { color: #fff; font-size: clamp(24px, 4vw, 36px); margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); text-align: center; } .holiday-content p { font-size: clamp(16px, 3vw, 22px); margin: 10px 0; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); text-align: center; } .holiday-content .subtext { font-size: clamp(14px, 2.5vw, 18px); font-style: italic; opacity: 0.95; } .paintbm { column-count: 2 } .paintbm li { margin: 0 15px 5px 0 } .brands { overflow: hidden; } .ask-review { max-width: 800px; margin: 40px 0; padding: 30px 20px; background-color: var(--light); border-left: 4px solid var(--accent); } .export-box { display: flex; flex-direction: column; align-items: center; margin: 0; border: 1px solid #eee; padding: 20px; border-radius: 5px; } .a8bmark { display: block; margin: 10px auto 0 auto; } @media(max-width:1200px) { .account table, .account thead, .account tbody, .account th, .account td, .account tr { display: block; } .account thead tr { display: none; } .account tr { border: 1px solid #ccc; } .account td { border: none; border-bottom: 1px solid #eee; position: relative; } .account table td { padding: 10px 0 !important; } .account td:before { margin-right: 15px; white-space: nowrap; background-color: #0D1539; color: #fff; } .account td:nth-of-type(1):before { content: "Customer ID"; font-weight: bold; padding: 11px 8px 12px 5px; } .account td:nth-of-type(2):before { content: "First Name"; font-weight: bold; padding: 11px 22px 12px 5px; } .account td:nth-of-type(3):before { content: "Last Name"; font-weight: bold; padding: 11px 25px 12px 5px; } .account td:nth-of-type(4):before { content: "Email"; font-weight: bold; font-size: 18px; padding: 11px 72px 12px 5px; } .account td:nth-of-type(5):before { content: "City"; font-weight: bold; padding: 11px 88px 12px 5px; } .account td:nth-of-type(6):before { content: "State"; font-weight: bold; padding: 11px 76px 12px 5px; } .account td:nth-of-type(7):before { content: "Price Level"; font-weight: bold; padding: 11px 24px 12px 5px; } .account td:nth-of-type(8):before { content: "Active"; font-weight: bold; padding: 11px 66px 12px 5px; } .account td:nth-of-type(9):before { content: "Details"; font-weight: bold; padding: 11px 60px 12px 5px; } } @media(max-width:1075px) { .qty { top: unset; right: unset; } } @media(max-width:999px) { .contact .grid.mid.half, .featured>.wrap>.grid.half, .grid.golden { grid-template-columns: 1fr; } .contact li { text-align: center; } .shoppingcart .grid.third { grid-template-columns: repeat(2, 1fr); } .product .grid.third.prod { grid-template-columns: 1fr 1fr } } @media(max-width:900px) { .sidebar { grid-template-columns: 1fr; } .help p { text-align: center; } .applications table, .applications thead, .applications tbody, .applications th, .applications td, .applications tr { display: block; } .applications thead tr { position: absolute; top: -9999px; left: -9999px; } .applications table td { padding: 10px 10px 10px 0 !important; } .applications tr { border: 1px solid #ccc; } .applications td { border: none; border-bottom: 1px solid #eee; position: relative; } .applications td:before { margin-right: 15px; white-space: nowrap; background-color: #0D1539; color: #fff; } .applications td:nth-of-type(1):before { content: "Type"; font-weight: bold; padding: 11px 92px 12px 5px; } .applications td:nth-of-type(2):before { content: "Manufacturer"; font-weight: bold; padding: 11px 10px 12px 5px; } .applications td:nth-of-type(3):before { content: "Model"; font-weight: bold; padding: 11px 79px 12px 5px; } .applications td:nth-of-type(4):before { content: "Street"; font-weight: bold; padding: 11px 81px 12px 5px; } .applications td:nth-of-type(5):before { content: "Dirt"; font-weight: bold; padding: 11px 101px 12px 5px; } .applications td:nth-of-type(6):before { content: "Status"; font-weight: bold; padding: 11px 78px 12px 5px; } .applications td:nth-of-type(7):before { content: "Year"; font-weight: bold; padding: 11px 97px 12px 5px; } .applications td:nth-of-type(8):before { content: "Edit"; font-weight: bold; padding: 11px 100px 12px 5px; } .applications td:nth-of-type(9):before { content: "Matrix"; font-weight: bold; padding: 11px 78px 12px 5px; } .instructions .grid.half { grid-template-columns: 1fr; padding: 0 8vw; } .instructions .grid div ul { float: none; } .instructions fieldset { margin: 0 auto; } .instructions { margin-left: 0; margin-right: 0; } .instructions fieldset legend { text-align: center; } } @media(max-width:800px) { main .admin>.row { flex-direction: column; } .admin a { padding-bottom: 15px; } .instructions .grid.half { padding: 0 5vw; } } @media(max-width:767px) { .grid.fourth, .products .grid.third.prod { grid-template-columns: 1fr 1fr } .grid.sixth { grid-template-columns: 1fr 1fr 1fr } #search strong { text-align: center; } header ul, header li, nav ul, nav li, .new h2, .new p { text-align: center !important } .social-links { display: flex; justify-content: center; } .logo img { margin: 0 auto } .product .productImageTitle, form#search label, .grid.topnav, header .grid { grid-template-columns: 1fr; } .productImageTitle div:nth-of-type(2) p { padding: 10px } form.sitesearch { margin: 0 auto; width: 100% } } @media(max-width:700px) { .hero form { width: auto; } .new .grid>div { order: unset !important } table, thead, tbody, th, td, tr { display: block; margin: 0; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { display: inline; margin-right: 15px; white-space: nowrap; background-color: #0D1539; color: #fff; } .orders-tbl td:nth-of-type(1):before { content: "Invoice"; font-weight: bold; padding: 12px 51px 12px 6px; } .orders-tbl td:nth-of-type(2):before { content: "Order Date"; font-weight: bold; padding: 12px 14px 12px 6px } .orders-tbl td:nth-of-type(3):before { content: "Order Total"; font-weight: bold; padding: 12px 13px 12px 6px } .options td:nth-of-type(1):before { content: "Name"; font-weight: bold; padding: 11px 62px 13px 5px; } .options td:nth-of-type(2):before { content: "Description"; font-weight: bold; padding: 11px 10px 13px 5px; } .options td:nth-of-type(3):before { content: "Status"; font-weight: bold; padding: 11px 59px 13px 5px; } .options td:nth-of-type(4):before { content: "Edit"; font-weight: bold; padding: 11px 81px 13px 5px; } .productview td:nth-of-type(1):before { content: "SKU"; font-weight: bold; padding: 11px 112px 13px 5px; } .productview td:nth-of-type(2):before { content: "Product Title"; font-weight: bold; font-size: 18px; padding: 11px 30px 13px 5px; } .productview td:nth-of-type(3):before { content: "Status"; font-weight: bold; padding: 11px 91px 13px 5px; } .productview td:nth-of-type(4):before { content: "Edit"; font-weight: bold; padding: 11px 113px 13px 5px; } .productview td:nth-of-type(5):before { content: "Attach Options"; font-weight: bold; padding: 11px 10px 13px 5px; } .manufacturers td:nth-of-type(1):before { content: "Manufacturer"; font-weight: bold; padding: 12px 14px 12px 6px } .manufacturers td:nth-of-type(2):before { content: "Status"; font-weight: bold; padding: 12px 82px 12px 6px } .coloryear td:nth-of-type(1):before { content: "Year"; font-weight: bold; padding: 11px 55px 13px 5px; } .products tbody { margin: 0; } .products td:nth-of-type(1):before { content: "Code"; font-weight: bold; padding: 12px 55px 12px 6px; } .products td:nth-of-type(2):before { content: "Top"; font-weight: bold; padding: 12px 69px 12px 6px; } .products td:nth-of-type(3):before { content: "Base"; font-weight: bold; padding: 12px 58px 12px 6px; } .products td:nth-of-type(4):before { content: "Comment"; font-weight: bold; padding: 12px 10px 12px 6px; } .products td:nth-of-type(5):before { content: "Color"; font-weight: bold; margin-right: 0; height: 40px; width: 105px; vertical-align: middle; align-items: end; padding: 15px 0 0 5px; } .coloryear td:nth-of-type(2):before { content: "Status"; font-weight: bold; padding: 11px 10px 13px 5px; } .account td:nth-of-type(4) { font-size: 15px } .products table td div { grid-template-columns: 1fr; margin-top: 15px; } .products table td div p { text-align: center; } .product table img { width: 100%; } .product td { text-align: center; } .shoppingcart .grid.third { grid-template-columns: 1fr; } .products td:nth-of-type(5) { display: flex; align-items: baseline; margin: 0; padding: 0 !important; } .containerdiv { display: flex; justify-content: space-between; flex-wrap: wrap; align-self: center; padding: 10px; flex-direction: row; width: 100% } .paint .containerdiv { display: unset !important } .products table td div.chip { height: 40px; margin: 5px } .instructions .grid.half { padding: 0 3vw; } #product table.a8b-table td { padding-left: 90px } #product .a8b-table td:before { color: #f5f5f5; background-color: #0d1539; position: absolute; left: 0; top: 0; height: 100%; width: 80px; margin-right: 0; display: flex; align-items: center; justify-content: center } #product .a8b-table td:nth-of-type(1):before { content: 'Name' } #product .a8b-table td:nth-of-type(2):before { content: 'Year' } #product .a8b-table td:nth-of-type(3):before { content: 'Color' } } @media(max-width:600px) { .grid.sixth { grid-template-columns: 1fr 1fr } .grid.half, .grid.mid, .grid.third, .grid.small { grid-template-columns: 1fr; } .prod>div .grid.half { grid-template-columns: repeat(2, 1fr); } .clearcoat-warning { flex-direction: column; align-items: center; } .subfoot p, .new h2, .new h3 { text-align: center } .imgRight, .imgLeft { float: none; margin: 0 auto; max-width: 100%; } form .co-account { grid-template-columns: 1fr; } .instructions .grid.half { padding: 0 1vw; } .instructions fieldset legend { font-size: 35px; } .newprod { grid-template-columns: 1fr; } } @media(max-width:500px) { .grid.fourth, .product .grid.third.prod, .products .grid.third.prod { grid-template-columns: 1fr; } .options td:nth-of-type(2):before { font-size: 18px; margin-right: 5px; } .options td:nth-of-type(2) { font-size: 69%; } .offroad { padding: 0; } .offroad .bgimg { padding: 5px 10px; position: relative; } .offroad .bgimg>img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; object-position: 50% 20% } nav ul { display: grid; grid-template-columns: 1fr 1fr; align-items: center } nav a { padding: 5px 10px } li:has(.epHeader) { grid-column: 1 / -1; display: flex; justify-content: center; } nav li.social-links { grid-column: 1 / -1; display: flex; justify-content: center; margin-left: 0; } } @media(max-width:400px) { .grid.sixth { grid-template-columns: 1fr } .applications td:nth-of-type(3):before { font-size: 18px; margin-right: 5px } .applications td:nth-of-type(3) { font-size: 75%; } .productview td:nth-of-type(2):before { font-size: 18px; margin-right: 5px; } .productview td:nth-of-type(2) { font-size: 85% } }