
@font-face {font-family: nnfont;src: url(https://www.nn-truckandtrailer.co.za/Content/Layout/NNTrucks_Trailers/2026/font//Gotham-Book.ttf);}
@font-face {font-family: changanfont;src: url(https://changanmotors.e5.ix.co.za/Content/Layout/Changan_Motors/2025/font/changanunitype-regular-bfed_400-webfont.woff);font-style: normal;font-weight: 200;}
@font-face {font-family: fotonlight;src: url(https://fotoncommercialtemp2026.e5.ix.co.za/Content/Layout/Foton_Commercial/2026/font//fotontype-light-webfont.woff);font-weight: 500;font-style: normal;}
@font-face {font-family: fotonbold;src: url(https://fotoncommercialtemp2026.e5.ix.co.za/Content/Layout/Foton_Commercial/2026/font//fotontype-bold-webfont.woff);font-weight: 500;font-style: normal;}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');.noto-sans-font {font-family: "Noto Sans", sans-serif;font-optical-sizing: auto;font-weight: 100;font-style: normal;}
.brandHeader.sticky {width: 100%;background: #fff;color: #fff;position: fixed;top: 0;left: 0;z-index: 9999999;transition: .3s ease-in-out;}
.changanHeader .brand-links a {color: #5f7891;font-weight: 400;margin: 0 20px;}
.changanHeader .brand-links {display: flex;align-items: center;}
.changanLogo {display: flex;max-width: 100%;align-items: center;}
.changanLogo img {max-width: 200px;}
.changanHeader .brand-links a:last-child {margin-right: 0;}
.changanHeader, .changanBrand h1,.changanBrand h2, .changanBrand h3,.changanBrand h4, .changanBrand h5,.changanBrand h6 {font-family: 'changanfont';}
.changanBrand .brandCopy.mx-auto {font-family: "Noto Sans", sans-serif;}
.brandSection h1 {text-transform: unset;}
section.changanBrand.brandSection {color: #3c4650;}
.changanBrand {border-top: 1px solid;}
.changanBrand .btn-primary {color: #fff;background-color: #0b457f;border-color: #0b457f;}
.changanBrand .btn-primary:hover, .changanBrand .btn-primary:not(:disabled):not(.disabled).active, .changanBrand .btn-primary:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-primary.dropdown-toggle {background-color: #ff9632;border-color: #ff9632;color: #fff;}
.changanBrand .btn-secondary {background-color: #ff9632;color: #fff;border-color: #ff9632;}
.changanBrand .btn-secondary:hover, .changanBrand .btn-secondary:not(:disabled):not(.disabled).active, .changanBrand .btn-secondary:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-secondary.dropdown-toggle {background-color: #0b457f;color: #fff;border-color: #0b457f;}
.changanBrand .btn-danger, .changanBrand .btn-danger:not(:disabled):not(.disabled).active, .changanBrand .btn-danger:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-danger.dropdown-toggle {color: #fff;background-color: #0b457f;border-color: #0b457f;}
.changanBrand .btn-danger:hover {color: #0b457f;background-color: transparent;border-color: #0b457f;}
.changanBrand .btn-outline-dark,.changanBrand .btn-info:hover, .changanBrand .btn-info:not(:disabled):not(.disabled).active, .changanBrand .btn-info:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-info.dropdown-toggle {color: #ff9632;border-color: #ff9632;}
.changanBrand .btn-outline-dark:hover,.changanBrand .btn-info, .changanBrand .btn-outline-dark:not(:disabled):not(.disabled).active, .changanBrand .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-outline-dark.dropdown-toggle {background-color: #ff9632;color: #fff;border-color: #ff9632;}
.changanBrand .btn-outline-info {color: #ff9632;border-color: #ff9632;}
.changanBrand .btn-outline-info:hover, .changanBrand .btn-outline-info:not(:disabled):not(.disabled).active, .changanBrand .btn-outline-info:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-outline-info.dropdown-toggle {color: #fff;border-color: #ff9632;background-color: #ff9632;}
.changanBrand .btn-info:hover {background: transparent;}
.changanBrand input[type="checkbox"] {accent-color: #0b457f;}
.changanBrand .article-widget .card-body {padding-left: 0;}
.changanBrand .page-item.active .page-link {background-color: #0b457f;border-color: #0b457f;}
.changanBrand .page-link {color: #212121;}
.changanBrand .btn {box-shadow: none !important;border-radius: 0;}
.changanBrand .text-primary, .changanBrand .text-danger {color: #0b457f !important;}
.changanBrand .vs-wishlist-icon-item {color: #0b457f !important;}
.changanBrand .border-primary {border-color: #0b457f !important;}
.changanBrand .form-select-cascade-marker {border-left: 0;}
.changanBrand div div#vehicleBar_FinanceButton .btn.btn-primary {padding: 4.9px !important;margin-left: .05rem;}
.changanBrand button.btn.btn-danger.btn-sm.float-right {margin-bottom: 8px;}
.changanBrand .custom-control-input:checked~.custom-control-label::before {color: #fff;border-color: #0b457f;background-color: #0b457f;}
.changanBrand .select2-container {display: block;}
.changanBrand .nms-wishlist-icon-item {color: #0b457f !important;}
.changanBrand .btn-info:not(:disabled):not(.disabled).active, .changanBrand .btn-info:not(:disabled):not(.disabled):active, .show>.changanBrand .btn-info.dropdown-toggle {background-color: #ff9632;color: #fff;}
section.changanBrand.brandSection div#dealers {background-color: #0a457f;color: #fff;}
.changanBrand div#dealer-list-grid {color: #000;}
.fotonHeader.brandHeader, .fotonHeader.brandHeader.sticky {background-color: rgb(4, 25, 84);}
.fotonLogo {max-width: 180px;}
.fotonLogo img.nav-logo {max-width: 100%;}
.fotonHeader .brand-links a {color: #fff;margin-left: 40px;text-transform: uppercase;font-family: 'fotonlight';}
.fotonBrand {font-family: "arial", sans-serif !important;}
.fotonBrand .btn-primary {color: #fff;background-color: #041954;border-color: #041954;}
.fotonBrand .btn-primary:hover, .fotonBrand .btn-primary:not(:disabled):not(.disabled).active, .fotonBrand .btn-primary:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-primary.dropdown-toggle {background-color: #10dcff;border-color: #10dcff;color: #000;}
.fotonBrand .btn-secondary {background-color: #10dcff;color: #000;border-color: #10dcff;}
.fotonBrand .btn-secondary:hover, .fotonBrand .btn-secondary:not(:disabled):not(.disabled).active, .fotonBrand .btn-secondary:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-secondary.dropdown-toggle {background-color: #041954;color: #fff;border-color: #041954;}
.fotonBrand .btn-danger, .fotonBrand .btn-danger:not(:disabled):not(.disabled).active, .fotonBrand .btn-danger:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-danger.dropdown-toggle {color: #fff;background-color: #041954;border-color: #041954;}
.fotonBrand .btn-danger:hover {color: #041954;background-color: transparent;border-color: #041954;}
.fotonBrand .btn-outline-dark,.fotonBrand .btn-info:hover, .fotonBrand .btn-info:not(:disabled):not(.disabled).active, .fotonBrand .btn-info:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-info.dropdown-toggle {color: #10dcff;border-color: #10dcff;}
.fotonBrand .btn-outline-dark:hover,.fotonBrand .btn-info, .fotonBrand .btn-outline-dark:not(:disabled):not(.disabled).active, .fotonBrand .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-outline-dark.dropdown-toggle {background-color: #10dcff;color: #000;border-color: #10dcff;}
.fotonBrand .btn-outline-info {color: #10dcff;border-color: #10dcff;}
.fotonBrand .btn-outline-info:hover, .fotonBrand .btn-outline-info:not(:disabled):not(.disabled).active, .fotonBrand .btn-outline-info:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-outline-info.dropdown-toggle {color: #fff;border-color: #10dcff;background-color: #10dcff;}
.fotonBrand .btn-info:hover {background: transparent;}
.fotonBrand input[type="checkbox"] {accent-color: #041954;}
.fotonBrand .article-widget .card-body {padding-left: 0;}
.fotonBrand .page-item.active .page-link {background-color: #041954;border-color: #041954;}
.fotonBrand .page-link {color: #212121;}
.fotonBrand .btn {box-shadow: none !important;border-radius: 0;}
.fotonBrand .text-primary, .fotonBrand .text-danger {color: #041954 !important;}
.fotonBrand .vs-wishlist-icon-item {color: #041954 !important;}
.fotonBrand .border-primary {border-color: #041954 !important;}
.fotonBrand .form-select-cascade-marker {border-left: 0;}
.fotonBrand div div#vehicleBar_FinanceButton .btn.btn-primary {padding: 4.9px !important;margin-left: .05rem;}
.fotonBrand button.btn.btn-danger.btn-sm.float-right {margin-bottom: 8px;}
.fotonBrand .custom-control-input:checked~.custom-control-label::before {color: #fff;border-color: #041954;background-color: #041954;}
.fotonBrand .select2-container {display: block;}
.fotonBrand .nms-wishlist-icon-item {color: #041954 !important;}
.fotonBrand .btn-info:not(:disabled):not(.disabled).active, .fotonBrand .btn-info:not(:disabled):not(.disabled):active, .show>.fotonBrand .btn-info.dropdown-toggle {background-color: #10dcff;color: #000;}
.fotonBrand #new-model-list-NewModels a, .fotonBrand a {color: #10dcff;}
.fotonHeader .brand-links a:hover {color: #10dcff;}
.fotonBrand h1, .fotonBrand h2,  .fotonBrand h3,  .fotonBrand h4,  .fotonBrand h5,  .fotonBrand h6 {font-family: 'fotonbold';}
.brandSection .mapSection {padding-bottom: 4rem;}
.nnHeader, .nnHeader.brandHeader.sticky {background-color: #000035;}
.nnLogo img {max-width: 100%;filter: brightness(100);}
.nnLogo {width: 15rem;}
.nnHeader .brand-links a {color: #fff;padding-left: 35px;}
.nnBrand #new-model-list-NewModels a, .nnBrand a, .nnHeader .brand-links a:hover {color: #2ac5f4;}
.nnBrand .btn-primary {color: #fff;background-color: #000035;border-color: #000035;}
.nnBrand .btn-primary:hover, .nnBrand .btn-primary:not(:disabled):not(.disabled).active, .nnBrand .btn-primary:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-primary.dropdown-toggle {background-color: #6c757d;border-color: #6c757d;color: #fff;}
.nnBrand .btn-secondary {background-color: #6c757d;color: #fff;border-color: #6c757d;}
.nnBrand .btn-secondary:hover, .nnBrand .btn-secondary:not(:disabled):not(.disabled).active, .nnBrand .btn-secondary:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-secondary.dropdown-toggle {background-color: #000035;color: #fff;border-color: #000035;}
.nnBrand .btn-danger, .nnBrand .btn-danger:not(:disabled):not(.disabled).active, .nnBrand .btn-danger:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-danger.dropdown-toggle {color: #fff;background-color: #000035;border-color: #000035;}
.nnBrand .btn-danger:hover {color: #000035;background-color: transparent;border-color: #000035;}
.nnBrand .btn-outline-dark,.nnBrand .btn-info:hover, .nnBrand .btn-info:not(:disabled):not(.disabled).active, .nnBrand .btn-info:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-info.dropdown-toggle {color: #6c757d;border-color: #6c757d;}
.nnBrand .btn-outline-dark:hover,.nnBrand .btn-info, .nnBrand .btn-outline-dark:not(:disabled):not(.disabled).active, .nnBrand .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-outline-dark.dropdown-toggle {background-color: #6c757d;color: #fff;border-color: #6c757d;}
.nnBrand .btn-outline-info {color: #6c757d;border-color: #6c757d;}
.nnBrand .btn-outline-info:hover, .nnBrand .btn-outline-info:not(:disabled):not(.disabled).active, .nnBrand .btn-outline-info:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-outline-info.dropdown-toggle {color: #fff;border-color: #6c757d;background-color: #6c757d;}
.nnBrand .btn-info:hover {background: transparent;}
.nnBrand input[type="checkbox"] {accent-color: #000035;}
.nnBrand .article-widget .card-body {padding-left: 0;}
.nnBrand .page-item.active .page-link {background-color: #000035;border-color: #000035;}
.nnBrand .page-link {color: #212121;}
.nnBrand .btn {box-shadow: none !important;border-radius: 0;}
.nnBrand .text-primary, .nnBrand .text-danger {color: #000035 !important;}
.nnBrand .vs-wishlist-icon-item {color: #000035 !important;}
.nnBrand .border-primary {border-color: #000035 !important;}
.nnBrand .form-select-cascade-marker {border-left: 0;}
.nnBrand div div#vehicleBar_FinanceButton .btn.btn-primary {padding: 4.9px !important;margin-left: .05rem;}
.nnBrand button.btn.btn-danger.btn-sm.float-right {margin-bottom: 8px;}
.nnBrand .custom-control-input:checked~.custom-control-label::before {color: #fff;border-color: #000035;background-color: #000035;}
.nnBrand .select2-container {display: block;}
.nnBrand .nms-wishlist-icon-item {color: #000035 !important;}
.nnBrand .btn-info:not(:disabled):not(.disabled).active, .nnBrand .btn-info:not(:disabled):not(.disabled):active, .show>.nnBrand .btn-info.dropdown-toggle {background-color: #6c757d;color: #fff;}
.brandContent div#newModelTabContentNewModels {margin-top: 0rem;}
.brands {padding: 50px 0 26px;}
.brands svg {height: 70px;}
.changanBrand .ourDealers {background-color: #0b457f;color: #fff;}
.fotonBrand .ourDealers {background-color: #041954;color: #fff;}
.nnBrand .ourDealers {background-color: #000035;color: #fff;}
div#widget-contactinfo-ContactsToyota {color: #000;}

@media(max-width:1280px) { 
.fotonHeader .brand-links a {margin-left: 20px;}}

@media(max-width:1160px) { 
.changanHeader .brand-links a {margin: 0 10px;}
.fotonLogo {width: 100%;justify-content: center;margin-bottom: 16px;max-width: unset;}
.fotonLogo img.nav-logo {max-width: 180px;}
.fotonHeader .container,  .contactDealerCopy .brand-links {text-align: center;width: 100%;justify-content: center;}}

@media(max-width:835px) { 
.changanHeader.brandHeader .container, .fotonHeader.brandHeader .container,  .contactDealerCopy .brand-links {text-align: center;width: 100%;justify-content: center;}
.changanLogo {width: 100%;justify-content: center;margin-bottom: 16px;}}

@media(max-width:768px) { 
.contactDealerCopy .brand-links {margin-top: 1rem;text-align: center;}
.contactDealerCopy .brand-links a {padding: 0 10px;}}

@media(max-width:480px) { 
.contactDealerCopy .contactCopy .container.text-overlay {padding: 0 1rem !important;top: 30%;}
.brand-links a,  .brandLinks a {line-height: 2rem;}
.brandHeader>.row, .fotonHeader>.row {justify-content: center !important;padding: 1rem 0 !important;}
.fotonHeader .brand-links {text-align: center;margin-top: 0;}
.fotonHeader .brand-links a {height: unset;margin-left: 0;font-size: 12px;}
.fotonHeader {box-shadow: none;}
.contactCopy .text-overlay {color: #fff;}
.brandContent .active.new-model-shape.tab-pane {width: 100%;}
.changanLogo {margin-bottom: 16px;}
.changanHeader .brand-links a:first-child {margin-left: 0;}
div#dealers h1,   .brandCopy h1 {text-align: center;}
.active.new-model-shape.tab-pane:before {text-align: center;width: 100%;display: block;}
.brandSection h1 {font-size: 2rem;}
.changanHeader .brand-links a {margin: 0 16px 0 0;}}