@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,600&display=swap');
:root{
--cassiopeia-color-primary:#000;
--cassiopeia-color-link:#224faa;
--link-color:#224faa;--link-color-rgb:34,79,170;
--cassiopeia-color-hover:#000;
--link-hover-color:#424077;
--link-hover-color-rgb:66,64,119
}

body {font-family: 'Roboto', sans-serif; color: #532a2a}

.container a, .container-fluid a {text-decoration: none}

h1, h2, h3, h4, h5 {font-family: 'Roboto Flex', sans-serif; font-weight: 600; text-align: center}
h1 {font-size: 2.2rem}
h2 {font-size: 1.8rem}
h3 {font-size: 1.6rem}
h4, h5 {font-size: 1.4rem}

article {padding: 1.5rem 0}
article .col {padding: 0.5rem}

/* Header */
.text-header {color: var(--success)}
.site-brand {font-family: "Saira Stencil One", sans-serif; letter-spacing: 0.2rem; font-size: 3rem}
.site-brand img {padding-right: 1rem;}
.heeader-icons {font-size: 1.8rem}
.heeader-icons i {padding: 0 0.25rem}
/* End header */

/* Menu */
.container-header .mod-menu>li {margin: 0.25rem}
.container-header .mod-menu>li:hover {text-decoration: none}
.container-header .mod-menu>li+li {margin: 0.25rem}
.container-header .mod-menu>li>a {color: var(--success)}
.mod-list li {padding: 0.25rem; align-self: center; white-space: nowrap}
.mod-list li a {font-family: "Saira Stencil One", sans-serif; letter-spacing: 0.2rem; text-transform: uppercase; font-weight: 500}
.mod-list li.active {background: var(--success); border-radius: 0.25rem}
.mod-list li.active>a {color: var(--light)}
.container-header .mod-menu>li.active:after, .container-header .mod-menu>li:hover:after {background: inherit}
.container-header .navbar-toggler {color: var(--success); border: 1px solid var(--success)}
.container-header nav {margin-top: 0}
.navbar {justify-content: center}
/* End menu */

/* Breadcrumbs */
.container-top-a {grid-column: full-start / full-end; background-color: var(--gray-600)}
.mod-breadcrumbs__wrapper {display: flex; align-items: center; justify-content: center}
.mod-breadcrumbs__divider {display: none}
.breadcrumb {font-size: 0.9rem; font-weight: 600}
.breadcrumb-item a {text-decoration: none; color: var(--light)}
.breadcrumb-item a:hover {color:#B3B3B3}
.breadcrumb-item+.breadcrumb-item:before {color: var(--light)}
.breadcrumb-item.active, .breadcrumb-item.active:before {color:var(--gray-500)}
/* End breadcrumbs */

/* Banner */
.banner-siteheader {background: url("/images/banners/difflock.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover}
.banner-ball-worm  {background: url("/images/banners/ball-worm_differential.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover}
.banner-deal {background: url("/images/banners/deal.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover}
.banner-information {background: url("/images/banners/information.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover}
.banner-dealership {background: url("/images/banners/dealership.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover}
.banner {display: flex; flex-direction: column!important; height: 448px; width: 100%; padding: 5% 15% 3%; color: var(--light)}
.header-banner {color: var(--light); font-family: 'Roboto Flex', sans-serif; font-size: 2.5rem; font-weight: 600; text-align: left}
.banner-description {font-size: 1.6rem; font-weight: 500}
.banner-button {display: flex; flex: 1 1 auto; padding-right: 5%; align-items: end; justify-content: end}
.btn-banner {border: 3px solid; font-size: 1.2rem; text-transform: uppercase; width: 20rem; font-weight: 600}
 /* End banner */

.card  {border: 1px solid var(--gray-500)}
.card-spares {max-width: 320px}
.card-title {font-size: 1.2rem; text-transform: uppercase}

.btn-spares {width: 20rem; text-transform: uppercase; font-weight: 600}

/* Kill copywrite */
#mxcpr {display: none!important}
/* End Kill copywrite */

/* Footer */
.footer {margin-top: 0}
.footer .grid-child {flex-direction: column; padding: 1rem}
.cookie-information {color: var(--gray-600); font-size: 0.8rem}
.cookie-information p {margin-bottom: 0.5rem}
.social-icons {color: var(--gray-500); text-align: center; font-size: 1.2rem; margin-bottom: 0.5rem}
.social-icons i {padding: 0 0.25rem}
.right-information {color: var(--gray-500); text-align: center; font-size: 0.8rem}
.right-information {margin-bottom: 0.5rem}
/* End footer */

@media (min-width: 992px) {
  .footer .mod-menu {flex-direction: row;}
}

@media (max-width: 992px) {
  .header-banner {font-size: 2rem}
  .banner-description {font-size: 1.4rem}
}

@media (min-width: 576.01px) and (max-width: 768px) {
  .header-banner {font-size: 1.8rem}
  .banner-description {font-size: 1.2rem}
}

@media (max-width: 576px) {
  .header-banner {font-size: 1.4rem}
  .banner-description {font-size: 1.1rem}
}