@media screen and (min-width: 1024px) {
	.c-burger { display: none }
}

.c-burger.is-active span { background-color: rgba(0,0,0,0) }
.c-burger.is-active span:before { transition: top .25s,transform .25s .25s; top: 0; transform: rotate(45deg) }
.c-burger.is-active span:after { transition: bottom .25s,transform .25s .25s; bottom: 0; transform: rotate(-45deg) }
.c-burger__bar { background-color: #000; display: block; height: 2px; left: 50%; position: absolute; top: 50%; transition: background-color .3s; transform: translate(-50%,-50%); width: 24px }
.c-burger__bar:before, .c-burger__bar:after { background-color: #000; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 100% }
.c-burger__bar:before { top: -5px; transition: top .25s .25s,transform .25s,background-color .3s }
.c-burger__bar:after { bottom: -5px; transition: bottom .25s .25s,transform .25s,background-color .3s }
.c-button { display: inline-block }
.c-button--back { align-items: center; display: flex; line-height: 0; padding: 17.5px 20px }
.c-button--back * { pointer-events: none }

@media screen and (min-width: 1024px) {
	.c-button--back { display: none }
}

.c-button--back::before { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); margin-right: 10px; transform: rotate(180deg) }
.c-button--next { align-items: center; display: flex; justify-content: space-between; line-height: 49px; width: 100% }

@media screen and (min-width: 1024px) {
	.c-button--next { justify-content: flex-start; line-height: normal; width: auto }
}

@media screen and (min-width: 1024px) {
	.c-button--next.active { color: #ff0012 }
}

.c-button--next::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); position: relative; top: 2px }

@media screen and (min-width: 1024px) {
	.c-button--next::after { content: url("https://www.mgmotor.co.za/svg/chevron.svg"); margin-left: 5px; top: 0 }
}

@media screen and (min-width: 1024px) {
	.c-button--sub-nav::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); margin-left: 10px; top: 3px }
}

.c-button--primary { color: #fff; display: block; line-height: 45px; min-height: 45px; position: relative; overflow: hidden; padding: 0 20px; text-align: center; transition: color .35s ease-in-out; white-space: nowrap; width: -moz-max-content; width: max-content; z-index: 0 }
.c-button--primary::before { display: block; position: absolute; content: ""; background-color: #000; height: 100%; inset: 0 auto auto 0; opacity: 1; width: 100%; z-index: -1 }

@media screen and (min-width: 1200px) {
	.c-button--primary::before { transition-duration: .35s }
}

.c-button--primary::after { display: block; position: absolute; content: ""; height: 100%; left: 0; top: 0; width: 100%; z-index: -2 }

@media screen and (min-width: 1200px) {
	.c-button--primary:hover { color: #000; transition: color .35s ease-in-out }
	.c-button--primary:hover::before { width: 0; height: 100%; opacity: 1 }
	.c-button--primary:hover .o-expand { border-color: #000; transition: border-color .35s ease-in-out }
	.c-button--primary:hover .o-expand::after, .c-button--primary:hover .o-expand::before { background-color: #000; transition: background-color .35s ease-in-out }
}

.c-button--electric { border-right: 16px solid #6accdd }
.c-button--electric::after { background-color: #6accdd }
.c-button--hybrid { border-right: 16px solid #7cd57d }
.c-button--hybrid::after { background-color: #7cd57d }
.c-button--electric-hybrid { border-right: 16px solid #edcc3a }
.c-button--electric-hybrid::after { background-color: #edcc3a }
.c-button--petrol { border-right: 16px solid #6881e7 }
.c-button--petrol::after { background-color: #6881e7 }
.c-button--red { border-right: 16px solid #ff0012 }
.c-button--red::after { background-color: #ff0012 }
.c-button--inline-cta { align-items: center; display: flex; line-height: 45px; margin-top: 10px }

@media screen and (min-width: 768px) {
	.c-button--inline-cta { margin-left: 30px; margin-top: 0 }
}

@media screen and (min-width: 1024px) {
	.c-button--inline-cta { margin-left: 0; margin-top: 10px }
}

@media screen and (min-width: 1600px) {
	.c-button--inline-cta { margin-left: 30px; margin-top: 0 }
}

@media screen and (min-width: 1200px) {
	.c-button--inline-cta img { transition: filter .35s ease-in-out }
}

@media screen and (min-width: 1200px) {
	.c-button--inline-cta:hover { color: #ff0012; transition: color .35s ease-in-out }
	.c-button--inline-cta:hover img { filter: invert(23%) sepia(96%) saturate(7223%) hue-rotate(344deg) brightness(112%) contrast(148%); transition: filter .35s ease-in-out }
}

.c-button--center { margin: 0 auto }
.c-button--compare { margin-bottom: 10px; text-align: left; width: 100% }

@media screen and (min-width: 1024px) {
	.c-button--compare { margin-right: 20px; width: auto }
}

.c-button--expand { padding-right: 45px }
.c-button--arrow { font-size: 18px; font-size: 1.125rem; line-height: 1.6666666667 }
.c-button--arrow::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); margin-left: 10px; position: relative; top: 2px }
.c-button--small { border-right: 0.625rem solid #ff0012; background-color: #000; display: none; margin-left: 0.625rem; text-align: center; text-indent: -100px; width: 55px }
.c-button--small::after { background-color: #ff0012 }
.c-button--small span::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); filter: invert(1); margin-left: 60px; right: -10px; position: relative; top: 2px }
.c-button--small * { pointer-events: none }
.c-button--small.visible { display: block }
.c-button--cta { text-decoration: underline }
.c-button--save { font-size: 20px; font-size: 1.25rem; line-height: 45px; padding-left: 45px; position: relative }

@media screen and (min-width: 1024px) {
	.c-button--save { margin-left: 45px }
}

.c-button--save::before { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/arrow.svg"); background-position: bottom center; background-repeat: no-repeat; background-size: contain; height: 20px; left: 0; top: 10px; transform: rotate(90deg); width: 32px }
.c-button--save::after { display: block; position: absolute; content: ""; border-bottom: 1px solid #000; left: 0; bottom: 5px; width: 32px }
.c-button--inline { display: flex; padding: 0 }
.c-button--preview { background-image: url("https://www.mgmotor.co.za/svg/preview-icon.svg"); background-repeat: no-repeat; background-size: 45px; display: inline-block; height: 45px; margin-bottom: 0; margin-right: 10px; width: 45px }
.c-button--download { background-image: url("https://www.mgmotor.co.za/svg/download-icon.svg"); background-repeat: no-repeat; background-size: 45px; display: inline-block; height: 45px; margin-bottom: 0; width: 45px }
.c-button--close { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/close-icon.svg"); background-repeat: no-repeat; background-size: 30px; height: 30px; right: 30px; top: 30px; width: 30px }
* { outline: none; }
button, button:visited, button:focus { background: none; border: none;  cursor: pointer; text-align: center; outline: none; }
.c-button--next::after { content: url(https://www.mgmotor.co.za/svg/arrow.svg); position: relative; top: 2px; }

@media screen and (min-width: 1024px) {
	.c-button--next::after { content: url(https://www.mgmotor.co.za/svg/chevron.svg); margin-left: 5px; top: 0; }
}


.c-burger { background-color: #fff; border: none; box-shadow: none; cursor: pointer; height: 24px; outline: none; overflow: hidden; padding: 0; position: absolute; right: 25px; width: 24px; z-index: 100 }

@media screen and (min-width: 1024px) {
	.c-burger { display: none }
}

.c-burger.is-active span { background-color: rgba(0,0,0,0) }

.c-burger.is-active span:before { transition: top .25s,transform .25s .25s; top: 0; transform: rotate(45deg) }

.c-burger.is-active span:after { transition: bottom .25s,transform .25s .25s; bottom: 0; transform: rotate(-45deg) }

.c-burger__bar { background-color: #000; display: block; height: 2px; left: 50%; position: absolute; top: 50%; transition: background-color .3s; transform: translate(-50%,-50%); width: 24px }

.c-burger__bar:before, .c-burger__bar:after { background-color: #000; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 100% }

.c-burger__bar:before { top: -5px; transition: top .25s .25s,transform .25s,background-color .3s }

.c-burger__bar:after { bottom: -5px; transition: bottom .25s .25s,transform .25s,background-color .3s }

.c-nav { background-color: #fff; height: calc(100vh - 60px); left: 0; padding: 15px 0 100px; position: absolute; top: 60px; transform: translateX(100%); transition: transform .35s ease-in-out; visibility: hidden; width: 100%; z-index: 5 }

@media screen and (min-width: 1024px) {
	.c-nav { display: flex; flex-direction: column-reverse; height: auto; padding: 0; top: 0; transform: translateX(0); transition: none; visibility: visible }
}

.c-nav.is-active { overflow-y: scroll; overflow-x: hidden; transform: translateX(0) }

.c-nav.visible { visibility: visible }

@media screen and (min-width: 1024px) {
	.c-nav__list { display: flex; margin: 20px 0 0 110px; min-height: 40px }
}

.c-nav__list-item { border-bottom: 1px solid #d8d8d8; line-height: 49px; padding: 0 20px }

@media screen and (min-width: 1024px) {
	.c-nav__list-item { border: 0; line-height: normal; margin-left: 20px; padding: 0; position: relative }
}

@media screen and (min-width: 1200px) {
	.c-nav__list-item { margin-left: 30px }
}

.c-nav__list-item:last-child { border: 0; line-height: 50px }

@media screen and (min-width: 1024px) {
	.c-nav__list-item:last-child { line-height: normal }
}

.c-nav__list-cta { font-family: inherit }

@media screen and (min-width: 1024px) {
	.c-nav__list-cta { line-height: normal }
}

.c-nav__mask { background-color: #000; height: 100vh; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 60px; transition: opacity .35s ease-in-out; width: 100% }

@media screen and (min-width: 1024px) {
	.c-nav__mask { display: none }
}

.c-nav__mask.is-active { opacity: .8; transition: opacity .35s ease-in-out }
.c-sub-nav { background-color: #fff; display: none; height: 100vh; left: 0; position: absolute; top: 15px; transform: translateX(100%); transition: transform .35s ease-in-out; width: 100%; z-index: 1 }

@media screen and (min-width: 1024px) {
	.c-sub-nav { left: 35%; opacity: 0; transform: translateX(0) }
}

@media screen and (min-width: 1200px) {
	.c-sub-nav { left: 27.5% }
}

@media screen and (min-width: 1600px) {
	.c-sub-nav { left: 20% }
}

.c-sub-nav.active { display: block }

@media screen and (min-width: 1024px) {
	.c-sub-nav.active { background: none; height: auto; left: 0; opacity: 1; position: fixed; top: 100px }
}

@media screen and (min-width: 1024px) {
	.c-sub-nav.open { background-color: rgba(0,0,0,0); height: auto; opacity: 1; left: 35%; pointer-events: all; position: fixed; top: 0; transition: visibility .35s ease-in-out; transition-delay: .35s; visibility: visible }
}

@media screen and (min-width: 1200px) {
	.c-sub-nav.open { left: 27.5% }
}

@media screen and (min-width: 1600px) {
	.c-sub-nav.open { left: 20% }
}

.c-sub-nav.slide-left { transform: translateX(0) }

@media screen and (min-width: 1024px) {
	.c-sub-nav.new-cars { height: calc(100vh - 100px); overflow-y: scroll; position: fixed; top: 100px; width: 100% }
}

.c-sub-nav--nested { top: 0 }

@media screen and (min-width: 1024px) {
	.c-sub-nav--nested { display: block; pointer-events: none; transition: visibility .35s ease-in-out; visibility: hidden }
}

@media screen and (min-width: 1024px) {
	.c-sub-nav__list { padding: 20px 0 40px 120px }
}

@media screen and (min-width: 1024px) {
	.c-sub-nav__list--child { padding: 20px }
}

.c-sub-nav__list-item { border-bottom: 1px solid #d8d8d8; line-height: 49px; padding-left: 40px }

@media screen and (min-width: 1024px) {
	.c-sub-nav__list-item { border: 0; line-height: 40px; padding-left: 20px }
}

.c-sub-nav__list-item:first-child { align-items: center; background-color: #f3f3f3; color: #ff0012; display: flex; justify-content: space-between; padding: 0 20px }

@media screen and (min-width: 1024px) {
	.c-sub-nav__list-item:first-child { background-color: rgba(0,0,0,0); color: #000; margin-bottom: 0; padding-left: 20px }
}

.c-sub-nav__list-item:first-child::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); transform: rotate(90deg) }

@media screen and (min-width: 1024px) {
	.c-sub-nav__list-item:first-child::after { content: "" }
}

.c-sub-nav__list-item--nested { display: flex; min-height: 40px; padding-right: 20px }

.c-sub-nav__list-item--nested.active { background-color: #e8e8e8 }
ul { padding: 0px; margin: 0px; }


.c-cars-nav { padding-bottom: 100px }

@media screen and (min-width: 1024px) {
	.c-cars-nav { display: flex; flex-direction: column; height: calc(100vh - 100px); padding-bottom: 0 }
}

@media screen and (min-width: 1200px) {
	.c-cars-nav { padding-top: 30px }
}

@media screen and (min-width: 1024px) {
	.c-cars-nav__list { display: flex; max-width: 100%; transition: max-width .35s ease-in-out }
}

@media screen and (min-width: 1200px) {
	.c-cars-nav__list { margin-left: 100px; width: calc(100% - 100px) }
}

@media screen and (min-width: 1600px) {
	.c-cars-nav__list { max-width: 70%; transition: max-width .35s ease-in-out }
}

@media screen and (min-width: 1024px) {
	.c-cars-nav__list-row { display: block }
}

.c-cars-nav__list-item { line-height: normal; padding: 0 0 }

.c-cars-nav__list-item:first-child { align-items: center; background-color: #f3f3f3; color: #ff0012; display: flex; justify-content: space-between; line-height: 49px; padding: 0 20px; font-weight: 600; }

@media screen and (min-width: 1024px) {
	.c-cars-nav__list-item:first-child { display: none }
}

.c-cars-nav__list-item:first-child::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); transform: rotate(90deg) }

.c-cars-nav__list-title { align-items: center; display: flex; font-size: 34px; font-size: 2.125rem; line-height: 40px; font-weight: 200; margin-bottom: 10px; padding: 0 20px; width: 100% }

.c-cars-nav__list-icon { margin-right: 10px }

.c-compare-block { padding: 30px 20px 80px }

@media screen and (min-width: 768px) {
	.c-compare-block { padding: 30px }
}

@media screen and (min-width: 1024px) {
	.c-compare-block { padding: 100px }
}

@media screen and (min-width: 768px) {
	.c-compare-block__content { display: flex; flex-direction: column; flex-grow: 1; padding: 0 20px }
}

@media screen and (min-width: 1024px) {
	.c-compare-block__content { margin-left: 60px; min-width: 320px; padding: 0 }
}

.c-compare-block__model-name { font-size: 22px; font-size: 1.375rem; line-height: 28px }

@media screen and (min-width: 768px) {
	.c-compare-block__model-name { font-size: 30px; font-size: 1.875rem; line-height: 36px }
}

.c-compare-block__list { flex-grow: 1; margin-bottom: 20px }

.c-compare-block__offer { font-size: 20px; font-size: 1.25rem; line-height: 26px; font-weight: 400 }

.c-compare-block__buttons { display: flex; flex-direction: column; margin-top: 20px; width: 100% }

@media screen and (min-width: 768px) {
	.c-compare-block__buttons { padding: 0 20px }
}

@media screen and (min-width: 1024px) {
	.c-compare-block__buttons { align-items: center; flex-direction: row; min-width: 320px; margin-left: 60px; padding: 0; width: auto }
}

.c-compare-block__terms { margin: 30px 0 }

@media screen and (min-width: 768px) {
	.c-compare-block__terms { padding: 0 20px }
}

@media screen and (min-width: 1200px) {
	.c-compare-block__terms { margin: 30px 0; padding: 0 45px }
}

@media screen and (min-width: 1400px) {
	.c-compare-block__terms { max-width: 1200px; margin: 30px auto; padding: 0 75px }
}

.c-compare-block__terms-txt { color: #a2a2a2; font-size: 14px; font-size: .875rem; line-height: 20px }

@media screen and (min-width: 1200px) {
	.c-compare-block__terms-txt { max-width: 90ch }
}

.c-configurator { margin: 30px 0; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-configurator { margin: 60px 0 }
}

@media screen and (min-width: 1200px) {
	.c-configurator { margin: 100px 0 }
}

@media screen and (min-width: 1400px) {
	.c-configurator { padding-left: 180px; padding-right: 80px }
}

@media screen and (min-width: 1600px) {
	.c-configurator { padding-left: 200px; padding-right: 200px }
}

@media screen and (min-width: 1024px) {
	.c-configurator__wrapper { display: flex; flex-direction: row-reverse; flex-wrap: wrap; min-height: 400px }
}

@media screen and (min-width: 1400px) {
	.c-configurator__wrapper { min-height: 475px }
}

@media screen and (min-width: 1600px) {
	.c-configurator__wrapper { min-height: 600px }
}

@media screen and (min-width: 768px) {
	.c-configurator__config { max-width: 50%; width: 100% }
}

@media screen and (min-width: 1024px) {
	.c-configurator__config { max-width: 35%; position: relative; z-index: 1 }
}

@media screen and (min-width: 1600px) {
	.c-configurator__config { max-width: 30% }
}

.c-configurator__box { margin-top: 20px }

@media screen and (min-width: 768px) {
	.c-configurator__box { -webkit-column-break-inside: avoid }
}

.c-configurator__box--colour { display: flex }

.c-configurator__split-title { font-size: 30px; font-size: 1.875rem; line-height: 36px; font-weight: 200; font-size: 30px; font-size: 1.875rem; line-height: 36px; margin-bottom: 0 }

@media screen and (min-width: 768px) {
	.c-configurator__split-title { font-size: 40px; font-size: 2.5rem; line-height: 46px }
}

.c-configurator__split-title span { font-weight: normal }

.c-configurator__graphic-img, .c-configurator__mirror-img { position: absolute; top: 0; left: 0 }

.c-configurator__price { display: inline-block; font-size: 20px; font-size: 1.25rem; line-height: 1.5; margin-bottom: 0 }

.c-configurator__colour { margin-right: auto }

.c-configurator__colour-title { font-size: 20px; font-size: 1.25rem; line-height: 1; font-weight: 200 }

.c-configurator__colour-picker { border: 2px solid #000; border-radius: 50%; cursor: pointer; display: inline-block; height: 30px; margin-left: 5px; position: relative; width: 30px }

.c-configurator__colour-picker::before, .c-configurator__colour-picker::after { display: block; position: absolute; content: ""; background-color: #fff; height: 15px; left: 50%; opacity: 0; top: 50%; transform: translate(-50%,-50%); transition: all .2s ease-in; width: 2px; z-index: 1 }

.c-configurator__colour-picker::after { transform: translate(-50%,-50%) rotate(90deg) }

.c-configurator__colour-picker.is-active::before, .c-configurator__colour-picker.is-active::after { opacity: 1 }

.c-configurator__colour-picker--hello-yellow { background-color: #eed11a }

.c-configurator__colour-picker--white-pearl { background-color: #fff }

.c-configurator__colour-picker--arctic-white { background-color: #fafafa }

.c-configurator__colour-picker--black-pearl { background-color: #111 }

.c-configurator__colour-picker--southwark-silver { background-color: #959595 }

.c-configurator__colour-picker--monument-silver { background-color: #97999b }

.c-configurator__colour-picker--westminster-silver { background-color: #a2a2a2 }

.c-configurator__colour-picker--battersea-blue { background-color: #0047bb }

.c-configurator__colour-picker--holborn-blue { background-color: #448ecb }

.c-configurator__colour-picker--piccadilly-blue { background-color: #617fac }

.c-configurator__colour-picker--pimlico-blue { background-color: #586d7c }

.c-configurator__colour-picker--hoxton-orange { background-color: #c4622d }

.c-configurator__colour-picker--dynamic-red { background-color: #da291c }

.c-configurator__colour-picker--cosmic-silver { background-color: #989a9d }

.c-configurator__colour-picker--hampstead-grey { background-color: #454a54 }

.c-configurator__colour-picker--volcano-orange { background-color: #fb870a }

.c-configurator__colour-picker--camden-grey { background-color: #656d7b }

.c-configurator__colour-picker--brixton-blue { background-color: #2976bf }

.c-configurator__colour-picker--racing-green { background-color: #9ab398 }

.c-configurator__colour-picker--white-pearl.is-active::before, .c-configurator__colour-picker--white-pearl.is-active::after, .c-configurator__colour-picker--arctic-white.is-active::before, .c-configurator__colour-picker--arctic-white.is-active::after { background-color: #000 }

.c-configurator__list { color: #585858; margin-top: 10px }

.c-configurator__buttons { margin-top: 20px }

@media screen and (min-width: 768px) {
	.c-configurator__buttons { width: 50% }
}

@media screen and (min-width: 1024px) {
	.c-configurator__buttons { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 0; position: relative; top: -45px; width: 100% }
}

.c-configurator__btn { margin-bottom: 10px; text-align: left; width: 100% }

@media screen and (min-width: 1024px) {
	.c-configurator__btn { margin-bottom: 0; margin-left: 15px; width: auto }
}

.c-configurator__powertrain { color: #585858; }
.c-configurator #scuk-calc iframe { height: 1200px !important }

@media screen and (min-width: 768px) {
	.c-content { display: flex; flex-wrap: wrap; justify-content: flex-start }
}

@media screen and (min-width: 1200px) {
	.c-content { margin-left: -30px }
}

.c-content--content { padding: 30px }

@media screen and (min-width: 768px) {
	.c-content--content { display: block; margin-left: 0 }
}

@media screen and (min-width: 1024px) {
	.c-content--content { padding: 30px 0; max-width: 75ch }
}

.c-content--small { padding: 0 0 15px }

.c-content--tabs { padding: 30px }

@media screen and (min-width: 768px) {
	.c-content--tabs { display: block; padding: 30px 0; margin-left: 0 }
}

@media screen and (min-width: 1024px) {
	.c-content--tabs { max-width: 75ch }
}

.c-content--form, .c-content--full { padding-bottom: 30px; padding-left: 30px; padding-right: 30px; padding-top: 0 }

@media screen and (min-width: 768px) {
	.c-content--form, .c-content--full { display: block; margin-top: 24px; width: 50% }
}

@media screen and (min-width: 1024px) {
	.c-content--form, .c-content--full { padding-right: 100px }
}

@media screen and (min-width: 1400px) {
	.c-content--form, .c-content--full { max-width: 400px; padding-right: 0 }
}

@media screen and (min-width: 1400px) {
	.c-content--full { max-width: none }
}

@media screen and (min-width: 1024px) {
	.c-content--plain { margin-left: 100px }
}

@media screen and (min-width: 1400px) {
	.c-content--plain { margin-left: 140px }
}

@media screen and (min-width: 1600px) {
	.c-content--plain { margin-left: 200px }
}

@media screen and (min-width: 768px) {
	.c-content--block { display: block }
}

@media screen and (min-width: 1024px) {
	.c-content--block { max-width: 75ch; margin: 0 }
}

@media screen and (min-width: 1024px) {
	.c-content--main { max-width: 75ch }
}

@media screen and (min-width: 1200px) {
	.c-content--main { margin-left: 0 }
}

@media screen and (min-width: 1400px) {
	.c-content--main { margin-left: 40px }
}

@media screen and (min-width: 1600px) {
	.c-content--main { margin-left: 80px }
}

@media screen and (min-width: 1024px) {
	.c-content--article { max-width: 75ch; margin-left: 0 }
}

@media screen and (min-width: 1400px) {
	.c-content--article { margin-left: 55px }
}

@media screen and (min-width: 1600px) {
	.c-content--article { margin-left: 105px }
}

.c-content--article p { color: #585858; margin-bottom: 30px }

.c-content--article p:first-of-type { font-size: 18px; font-size: 1.125rem; line-height: 24px }

.c-content--accessories { padding: 30px }

@media screen and (min-width: 1024px) {
	.c-content--accessories { margin-left: -30px; padding: 0 }
}

@media screen and (min-width: 1200px) {
	.c-content__container { display: flex }
}

@media screen and (min-width: 1600px) {
	.c-content__container { max-width: 1200px }
}

@media screen and (min-width: 1200px) {
	.c-content__main { padding-right: 30px; width: 70% }
}

.c-content__main p { color: #585858; font-size: 15px; font-size: .9375rem; line-height: 24px; }

@media screen and (min-width: 1200px) {
	.c-content__side { padding-left: 30px; width: 30% }
}

@media screen and (min-width: 768px) {
	.c-content__inner { margin: 0 65px }
}

@media screen and (min-width: 1200px) {
	.c-content__inner { margin-bottom: 0; margin-left: 65px; margin-right: 0; margin-top: 0 }
}

.c-content__item { margin-bottom: 30px }

@media screen and (min-width: 768px) {
	.c-content__item { display: flex }
}

@media screen and (min-width: 1024px) {
	.c-content__item { margin-left: 30px }
}

@media screen and (min-width: 1200px) {
	.c-content__item { width: calc(50% - 30px) }
}

.c-content__img { margin-bottom: 10px }

@media screen and (min-width: 768px) {
	.c-content__img { margin-bottom: 0; margin-right: 20px; max-width: 45% }
}

@media screen and (min-width: 1024px) {
	.c-content__img { -o-object-fit: cover; object-fit: cover; max-width: 50% }
}

.c-content__product-name { font-size: 20px; font-size: 1.25rem; line-height: 26px; margin-bottom: 0 }

.c-content__lead-title { font-size: 40px; font-size: 2.5rem; line-height: 46px; font-weight: 200 }

@media screen and (min-width: 768px) {
	.c-content__lead-title { font-size: 60px; font-size: 3.75rem; line-height: 66px }
}

.c-content__lead-title--arrow { padding-left: 45px; position: relative }

@media screen and (min-width: 768px) {
	.c-content__lead-title--arrow { padding-left: 65px }
}

@media screen and (min-width: 1200px) {
	.c-content__lead-title--arrow { margin: 30px 0 }
}

.c-content__lead-title--arrow::before { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/arrow.svg"); background-position: left center; background-repeat: no-repeat; background-size: 34px; bottom: 0; height: 40px; left: 0; top: auto; transform: rotate(90deg); width: 40px }

@media screen and (min-width: 768px) {
	.c-content__lead-title--arrow::before { background-size: 50px; bottom: 10px; height: 50px; width: 50px }
}

.c-content__title { font-size: 20px; font-size: 1.25rem; line-height: 26px; font-weight: 200; margin-bottom: 10px }

.c-content__sub-title { color: #a2a2a2; display: inline-block; font-size: 14px; font-size: .875rem; line-height: 20px; margin-bottom: 20px }

.c-content__intro { font-size: 18px; font-size: 1.125rem; line-height: 24px }

.c-content__txt { color: #585858; margin-bottom: 30px }

@media screen and (min-width: 1024px) {
	.c-content__side { max-width: 75ch }
}

.c-content__side p { color: #000; font-size: 18px; font-size: 1.125rem; line-height: 24px; margin-top: 30px }

@media screen and (min-width: 1200px) {
	.c-content__side p { margin-top: 0 }
}

.c-content__side strong { font-weight: normal }

.c-content__side-txt { color: #000; font-size: 18px; font-size: 1.125rem; line-height: 24px; margin-top: 30px }

@media screen and (min-width: 1200px) {
	.c-content__side-txt { margin-top: 0 }
}

.c-content__cta { color: #000; text-decoration: underline }
.c-content__price { color: #585858; display: inline-block; margin-top: 20px }
.c-content__list { color: #585858; margin-bottom: 30px }
.c-content__list--nested { margin-left: 17px }
.c-content__list--disc li { list-style: disc; margin-left: 18px }
.c-content__list--list li { list-style: decimal; margin-left: 26px }
.c-content__list--decimal li { margin-bottom: 30px }
.c-content__list--px li { color: #000; font-size: 16px; font-size: 1rem; line-height: 22px; margin-bottom: 5px }

@media screen and (min-width: 768px) {
	.c-content__list--px li { font-size: 20px; font-size: 1.25rem; line-height: 28px }
}

.c-content__list--px li span { display: inline-block; min-width: 150px }

@media screen and (min-width: 768px) {
	.c-content__list--px li span { min-width: 175px }
}

.c-content__list--small { margin-bottom: 0 }

.c-content__list-item { color: #585858; }

.c-content__list-item--disc { list-style: disc; margin-left: 18px }

.c-content__list-item--list { list-style: decimal; margin-left: 26px }

.c-content__list-item--decimal { margin-bottom: 30px }

.c-content__list-item--px { color: #000; font-size: 16px; font-size: 1rem; line-height: 22px; margin-bottom: 5px }

@media screen and (min-width: 768px) {
	.c-content__list-item--px { font-size: 20px; font-size: 1.25rem; line-height: 28px }
}

.c-content__list-item--px span { display: inline-block; min-width: 150px }

@media screen and (min-width: 768px) {
	.c-content__list-item--px span { min-width: 175px }
}

.c-content__terms { color: #a2a2a2 }
.c-content__info { color: #585858; margin-bottom: 30px }
.c-content__info-image { max-width: 300px }
.c-content__split-title { font-size: 20px; font-size: 1.25rem; line-height: 26px; font-weight: 200; color: #000; margin-bottom: 5px }
.c-content__split-title span { font-weight: normal }
.c-content__car-details { display: flex; flex-wrap: wrap; margin-bottom: 30px }
.c-content__features { margin-bottom: 30px }
.c-content__car-info { line-height: 40px; padding-left: 30px; position: relative; width: 50% }

@media screen and (min-width: 768px) {
	.c-content__car-info { width: 25% }
}

.c-content__car-info::before { display: block; position: absolute; content: ""; background-position: center; background-repeat: no-repeat; background-size: auto; height: 20px; left: 0; top: 10px; width: 20px }

.c-content__car-info--seat::before { background-image: url("https://www.mgmotor.co.za/svg/car-seat-icon.svg") }

.c-content__car-info--owner::before { background-image: url("https://www.mgmotor.co.za/svg/owner-icon.svg") }

.c-content__car-info--tick::before { background-image: url("https://www.mgmotor.co.za/svg/tick-icon.svg") }

.c-content__car-info--transmission::before { background-image: url("https://www.mgmotor.co.za/svg/transmission-icon.svg") }

.c-dealer-info-box { background: #fff; color: #000; counter-increment: dealers; display: flex; flex-direction: column; margin-bottom: 30px; max-width: 320px; padding: 10px; text-align: left; width: 100% }

.c-dealer-info-box a { color: #fff }

.c-dealer-info-box button.js-select-dealer { font-size: 16px; font-size: 1rem; line-height: 45px; }

@media screen and (min-width: 768px) {
	.c-dealer-info-box { margin-bottom: 20px }
}

.c-dealer-info-box__distance-icon { color: #fff; background-image: url("https://www.mgmotor.co.za/svg/marker-icon.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; font-size: 14px; font-size: .875rem; line-height: 25px; height: 30px; margin-left: -30px; margin-right: 5px; text-align: center; vertical-align: middle; width: 20px }

.c-dealer-info-box__cyberster-distance-icon { background-image: url("https://www.mgmotor.co.za/svg/cyberster-marker-icon.svg") }
.c-dealer-info-box__heading { font-size: 20px; font-size: 1.25rem; line-height: 26px; font-weight: 200; margin-bottom: 10px; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-dealer-info-box__heading { font-size: 16px; font-size: 1rem; line-height: 22px }
}

.c-dealer-info-box__heading--no-pl { padding-left: 0 }

.c-dealer-info-box__content { font-size: 15px; font-size: .9375rem; line-height: 20px; }

.c-dealer-info-box__address { color: #585858; margin-bottom: 10px }

.c-dealer-info-box__email { display: inline-block; margin-bottom: 10px; text-decoration: underline }

.c-dealer-info-box__txt { margin-bottom: 10px }

.c-dealer-info-box__list-item { color: #585858 }

.c-dealer-info-box__btn { font-size: 16px; font-size: 1rem; line-height: 45px; margin-top: 20px; text-align: left }

.c-dealer-info-box__service { margin-right: 15px; padding-left: 25px; position: relative; white-space: nowrap }

.c-dealer-info-box__service:last-of-type { margin-right: 0 }

.c-dealer-info-box__service::before { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/tick-icon.svg"); background-position: center; background-repeat: no-repeat; background-size: auto; height: 20px; left: 0; top: 0; width: 20px }

.c-dealer-info-box__close-btn { background-image: url("https://www.mgmotor.co.za/svg/close-icon.svg"); background-repeat: no-repeat; background-size: 30px; height: 30px; position: absolute; right: 15px; text-indent: -9999px; top: 15px; width: 30px; z-index: 1 }

.c-dealer-info-box__list { margin: 10px 0 20px }

.c-dealer-info-box__list-item { color: #000 }

.c-dealer-info-box__list-item span { display: inline-block; min-width: 125px }

.gm-ui-hover-effect { right: 15px !important; opacity: 0; top: 15px !important; z-index: 1 }

.gm-style .gm-style-iw-c { min-width: 340px !important }

.c-electric-range { background-color: #f3f3f3 }

.c-electric-range__inner { padding: 30px 0 }

@media screen and (min-width: 1200px) {
	.c-electric-range__inner { padding: 100px }
}

@media screen and (min-width: 768px) {
	.c-electric-range__inner--reverse { flex-direction: row-reverse; justify-content: flex-end }
}

.c-electric-range__inner--electric { padding-bottom: 0 }

@media screen and (min-width: 1200px) {
	.c-electric-range__inner--electric { padding: 100px 0 0 }
}

.c-electric-range__inner.hidden { display: none }

@media screen and (min-width: 768px) {
	.c-electric-range__row { display: flex }
}

@media screen and (min-width: 1024px) {
	.c-electric-range__row { padding: 0 30px }

	.c-electric-range__row .c-accordion__split-txt { padding-right: 0 }

	.c-electric-range__row .o-accordion-header { border: 0; pointer-events: none }

	.c-electric-range__row .o-accordion-panel { display: block }

	.c-electric-range__row .o-accordion-icon { display: none }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__row { padding: 0 }

	.c-electric-range__row .o-accordion-panel { overflow: visible }
}

.c-electric-range__row.hidden { display: none }

@media screen and (min-width: 768px) {
	.c-electric-range__block { width: 50% }
}

@media screen and (min-width: 1024px) {
	.c-electric-range__block:first-of-type { display: flex; justify-content: space-between; width: 66% }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__block:first-of-type { width: 60% }
}

@media screen and (min-width: 1024px) {
	.c-electric-range__block:last-of-type { width: 34% }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__block:last-of-type { width: 40% }
}

@media screen and (min-width: 768px) {
	.c-electric-range__inner--reverse .c-electric-range__block:first-child { padding-left: 80px }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__inner--reverse .c-electric-range__block:first-child { padding-left: 140px }
}

@media screen and (min-width: 1024px) {
	.c-electric-range__col { width: calc(50% - 15px) }
}

.c-electric-range__split-title { font-size: 30px; font-size: 1.875rem; line-height: 36px; font-weight: 200; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-electric-range__split-title { font-size: 40px; font-size: 2.5rem; line-height: 46px }
}

.c-electric-range__split-title span { font-weight: normal }

@media screen and (min-width: 1200px) {
	.c-electric-range__split-title { padding: 0 }
}

.c-electric-range__split-title--lrg { font-size: 60px; font-size: 3.75rem; line-height: 1 }

@media screen and (min-width: 1024px) {
	.c-electric-range__split-title--lrg { font-size: 50px; font-size: 3.125rem; line-height: 1 }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__split-title--lrg { font-size: 60px; font-size: 3.75rem; line-height: 1 }
}

.c-electric-range__copy { padding: 0 30px }

@media screen and (min-width: 1200px) {
	.c-electric-range__copy { padding: 0 }
}

.c-electric-range__subheading { font-size: 20px; font-size: 1.25rem; line-height: 1; margin: 0 30px }

@media screen and (min-width: 1024px) {
	.c-electric-range__subheading { margin-top: 15px }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__subheading { margin-left: 0 }
}

.c-electric-range__list { margin: 10px 0; padding: 0 30px }

@media screen and (min-width: 1024px) {
	.c-electric-range__list { padding: 0 }
}

.c-electric-range__list--ds { display: none }

.c-electric-range__list.selected { display: block }

.c-electric-range__list-item { border: 1px solid #000; display: flex; min-height: 46px; margin-bottom: 10px; position: relative }

@media screen and (min-width: 1600px) {
	.c-electric-range__list-item { max-width: 350px }
}

.c-electric-range__button { font-size: 16px; font-size: 1rem; line-height: 1; padding: 14px 20px; width: calc(100% - 50px) }

.c-electric-range__button.selected { background-color: #6accdd; background-image: url("https://www.mgmotor.co.za/svg/selected-icon.svg"); background-repeat: no-repeat; background-position: center right 20px; border: 1px solid #6accdd; color: #fff; left: -1px; position: absolute; top: -1px; width: calc(100% + 2px) }

.c-electric-range__info { align-items: center; background-color: rgba(0,0,0,.9); display: none; height: 100%; justify-content: center; left: 0; padding: 30px; position: fixed; top: 0; width: 100%; z-index: 110 }

@media screen and (min-width: 1200px) {
	.c-electric-range__info { box-shadow: 0 0 11px rgba(33,33,33,.2) }

	.c-electric-range__info::after { content: " "; width: 0; height: 0; border-style: solid; border-width: 12px 12.5px 0 12.5px; border-color: #fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0); position: absolute; top: calc(50% - 6px); left: -15px; transform: rotate(90deg) }
}

.c-electric-range__info.open { display: flex }

.c-electric-range__info-inner { background-color: #fff; padding: 30px; position: relative }

@media screen and (min-width: 1200px) {
	.c-electric-range__info-inner { padding: 20px }
}

.c-electric-range__info-list li { list-style: disc; margin-left: 18px }

.c-electric-range__info-list li:first-of-type { list-style: none; margin-left: 0 }

.c-electric-range__info-trim { font-size: 20px; margin-bottom: 10px }

@media screen and (min-width: 1200px) {
	.c-electric-range__info-trim { display: none }
}

.c-electric-range__info-btn { background-image: url("https://www.mgmotor.co.za/svg/info-icon.svg"); background-repeat: no-repeat; background-position: center; background-size: 20px; height: 44px; width: 50px }

@media screen and (min-width: 1200px) {
	.c-electric-range__info-btn { cursor: auto }

	.c-electric-range__info-btn:hover ~ .c-electric-range__info { background: none; display: block; height: auto; max-width: 440px; left: calc(100% - 10px); padding: 0; position: absolute; top: 50%; transform: translateY(-50%) }
}

.c-electric-range__tooltip { display: none }

.c-electric-range__range { margin-top: 30px }

@media screen and (min-width: 1024px) {
	.c-electric-range__range { margin-top: 0 }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__range { margin-left: 30px }
}

.c-electric-range__close { background-image: url("https://www.mgmotor.co.za/svg/close-icon.svg"); background-repeat: no-repeat; background-size: 100%; height: 24px; position: absolute; right: 15px; top: 15px; width: 24px }

@media screen and (min-width: 1200px) {
	.c-electric-range__close { display: none }
}

.c-electric-range__car { background-image: url("https://www.mgmotor.co.za/svg/electric-icon.svg"); background-repeat: no-repeat; background-position: top right; background-size: 185px; margin: 30px; padding-top: 50px }

@media screen and (min-width: 1200px) {
	.c-electric-range__car { background-size: 200px; max-width: 560px; margin: 0 }
}

.c-electric-range__car-img { display: none }

.c-electric-range__car-img.selected { display: block }

.c-electric-range__terms { color: #585858; margin-top: 50px; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-electric-range__terms { flex: 1; max-width: 75ch }
}

@media screen and (min-width: 1200px) {
	.c-electric-range__terms { padding: 0 }
}

img { display: block; flex: none; height: auto; max-width: 100%; }

.c-cars-nav { padding-bottom: 100px }

@media screen and (min-width: 1024px) {
	.c-cars-nav { display: flex; flex-direction: column; height: calc(100vh - 100px); padding-bottom: 0 }
}

@media screen and (min-width: 1200px) {
	.c-cars-nav { padding-top: 30px }
}

@media screen and (min-width: 1024px) {
	.c-cars-nav__list { display: flex; max-width: 100%; transition: max-width .35s ease-in-out }
}

@media screen and (min-width: 1200px) {
	.c-cars-nav__list { margin-left: 100px; width: calc(100% - 100px) }
}

@media screen and (min-width: 1600px) {
	.c-cars-nav__list { max-width: 70%; transition: max-width .35s ease-in-out }
}

@media screen and (min-width: 1024px) {
	.c-cars-nav__list-row { display: block }
}

.c-cars-nav__list-item { line-height: normal; padding: 0 0 }

.c-cars-nav__list-item:first-child { align-items: center; background-color: #f3f3f3; color: #ff0012; display: flex; justify-content: space-between; line-height: 49px; padding: 0 20px }

@media screen and (min-width: 1024px) {
	.c-cars-nav__list-item:first-child { display: none }
}

.c-cars-nav__list-item:first-child::after { content: url("https://www.mgmotor.co.za/svg/arrow.svg"); transform: rotate(90deg) }

.c-cars-nav__list-title { align-items: center; display: flex; font-size: 34px; font-size: 2.125rem; line-height: 40px; font-weight: 200; margin-bottom: 10px; padding: 0 20px; width: 100% }

.c-cars-nav__list-icon { margin-right: 10px }

.c-compare-block { padding: 30px 20px 80px }

@media screen and (min-width: 768px) {
	.c-compare-block { padding: 30px }
}

@media screen and (min-width: 1024px) {
	.c-compare-block { padding: 100px }
}

@media screen and (min-width: 768px) {
	.c-compare-block__content { display: flex; flex-direction: column; flex-grow: 1; padding: 0 20px }
}

@media screen and (min-width: 1024px) {
	.c-compare-block__content { margin-left: 60px; min-width: 320px; padding: 0 }
}

.c-compare-block__model-name { font-size: 22px; font-size: 1.375rem; line-height: 28px }

@media screen and (min-width: 768px) {
	.c-compare-block__model-name { font-size: 30px; font-size: 1.875rem; line-height: 36px }
}

.c-compare-block__list { flex-grow: 1; margin-bottom: 20px }

.c-compare-block__offer { font-size: 20px; font-size: 1.25rem; line-height: 26px; font-weight: 400 }

.c-compare-block__buttons { display: flex; flex-direction: column; margin-top: 20px; width: 100% }

@media screen and (min-width: 768px) {
	.c-compare-block__buttons { padding: 0 20px }
}

@media screen and (min-width: 1024px) {
	.c-compare-block__buttons { align-items: center; flex-direction: row; min-width: 320px; margin-left: 60px; padding: 0; width: auto }
}

.c-compare-block__terms { margin: 30px 0 }

@media screen and (min-width: 768px) {
	.c-compare-block__terms { padding: 0 20px }
}

@media screen and (min-width: 1200px) {
	.c-compare-block__terms { margin: 30px 0; padding: 0 45px }
}

@media screen and (min-width: 1400px) {
	.c-compare-block__terms { max-width: 1200px; margin: 30px auto; padding: 0 75px }
}

.c-compare-block__terms-txt { color: #a2a2a2; font-size: 14px; font-size: .875rem; line-height: 20px }

@media screen and (min-width: 1200px) {
	.c-compare-block__terms-txt { max-width: 90ch }
}

.c-configurator { margin: 30px 0; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-configurator { margin: 60px 0 }
}

@media screen and (min-width: 1200px) {
	.c-configurator { margin: 100px 0 }
}

@media screen and (min-width: 1400px) {
	.c-configurator { padding-left: 180px; padding-right: 80px }
}

@media screen and (min-width: 1600px) {
	.c-configurator { padding-left: 200px; padding-right: 200px }
}

@media screen and (min-width: 1024px) {
	.c-configurator__wrapper { display: flex; flex-direction: row-reverse; flex-wrap: wrap; min-height: 400px }
}

@media screen and (min-width: 1400px) {
	.c-configurator__wrapper { min-height: 475px }
}

@media screen and (min-width: 1600px) {
	.c-configurator__wrapper { min-height: 600px }
}

@media screen and (min-width: 768px) {
	.c-configurator__config { max-width: 50%; width: 100% }
}

@media screen and (min-width: 1024px) {
	.c-configurator__config { max-width: 35%; position: relative; z-index: 1 }
}

@media screen and (min-width: 1600px) {
	.c-configurator__config { max-width: 30% }
}

.c-configurator__box { margin-top: 20px }

@media screen and (min-width: 768px) {
	.c-configurator__box { -webkit-column-break-inside: avoid }
}

.c-configurator__box--colour { display: flex }

.c-configurator__split-title { font-size: 30px; font-size: 1.875rem; line-height: 36px; font-weight: 200; font-size: 30px; font-size: 1.875rem; line-height: 36px; margin-bottom: 0 }

@media screen and (min-width: 768px) {
	.c-configurator__split-title { font-size: 40px; font-size: 2.5rem; line-height: 46px }
}

.c-configurator__split-title span { font-weight: normal }
.c-configurator__graphic-img, .c-configurator__mirror-img { position: absolute; top: 0; left: 0 }
.c-configurator__price { display: inline-block; font-size: 20px; font-size: 1.25rem; line-height: 1.5; margin-bottom: 0 }
.c-configurator__colour { margin-right: auto }
.c-configurator__colour-title { font-size: 20px; font-size: 1.25rem; line-height: 1; font-weight: 200 }
.c-configurator__colour-picker { border: 2px solid #000; border-radius: 50%; cursor: pointer; display: inline-block; height: 30px; margin-left: 5px; position: relative; width: 30px }

.c-configurator__colour-picker::before, .c-configurator__colour-picker::after { display: block; position: absolute; content: ""; background-color: #fff; height: 15px; left: 50%; opacity: 0; top: 50%; transform: translate(-50%,-50%); transition: all .2s ease-in; width: 2px; z-index: 1 }

.c-configurator__colour-picker::after { transform: translate(-50%,-50%) rotate(90deg) }

.c-configurator__colour-picker.is-active::before, .c-configurator__colour-picker.is-active::after { opacity: 1 }

.c-configurator__colour-picker--hello-yellow { background-color: #eed11a }

.c-configurator__colour-picker--white-pearl { background-color: #fff }

.c-configurator__colour-picker--arctic-white { background-color: #fafafa }

.c-configurator__colour-picker--black-pearl { background-color: #111 }

.c-configurator__colour-picker--southwark-silver { background-color: #959595 }

.c-configurator__colour-picker--monument-silver { background-color: #97999b }

.c-configurator__colour-picker--westminster-silver { background-color: #a2a2a2 }

.c-configurator__colour-picker--battersea-blue { background-color: #0047bb }

.c-configurator__colour-picker--holborn-blue { background-color: #448ecb }

.c-configurator__colour-picker--piccadilly-blue { background-color: #617fac }

.c-configurator__colour-picker--pimlico-blue { background-color: #586d7c }

.c-configurator__colour-picker--hoxton-orange { background-color: #c4622d }

.c-configurator__colour-picker--dynamic-red { background-color: #da291c }

.c-configurator__colour-picker--cosmic-silver { background-color: #989a9d }

.c-configurator__colour-picker--hampstead-grey { background-color: #454a54 }

.c-configurator__colour-picker--volcano-orange { background-color: #fb870a }

.c-configurator__colour-picker--camden-grey { background-color: #656d7b }

.c-configurator__colour-picker--brixton-blue { background-color: #2976bf }

.c-configurator__colour-picker--racing-green { background-color: #9ab398 }

.c-configurator__colour-picker--white-pearl.is-active::before, .c-configurator__colour-picker--white-pearl.is-active::after, .c-configurator__colour-picker--arctic-white.is-active::before, .c-configurator__colour-picker--arctic-white.is-active::after { background-color: #000 }

.c-configurator__list { color: #585858; margin-top: 10px }

.c-configurator__buttons { margin-top: 20px }

@media screen and (min-width: 768px) {
	.c-configurator__buttons { width: 50% }
}

@media screen and (min-width: 1024px) {
	.c-configurator__buttons { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 0; position: relative; top: -45px; width: 100% }
}

.c-configurator__btn { margin-bottom: 10px; text-align: left; width: 100% }

@media screen and (min-width: 1024px) {
	.c-configurator__btn { margin-bottom: 0; margin-left: 15px; width: auto }
}

.c-configurator__powertrain { color: #585858; }

.c-configurator #scuk-calc iframe { height: 1200px !important }

@media screen and (min-width: 1024px) {
	.c-quick-links__list { display: flex; margin-left: auto; margin-right: 60px }
}

.c-quick-links__list-item { border-top: 2px solid #fff; background-color: #f3f3f3; line-height: 48px }

@media screen and (min-width: 1024px) {
	.c-quick-links__list-item { border: 0; line-height: 40px; padding-left: 25px }

	.c-quick-links__list-item:first-of-type { padding-left: 20px }
}

.c-quick-links__list-cta { align-items: center; display: flex; font-family: inherit; padding: 0 20px; text-decoration: none; width: 100% }

@media screen and (min-width: 1024px) {
	.c-quick-links__list-cta { padding: 0 }
}

@media screen and (min-width: 1200px) {
	.c-range--grid { padding-bottom: 100px; padding-left: 100px; padding-right: 100px }
}

@media screen and (min-width: 1400px) {
	.c-range--grid { padding-left: 140px; padding-right: 140px }
}

@media screen and (min-width: 1600px) {
	.c-range--grid { max-width: 1600px; padding-left: 200px; padding-right: 200px }
}

@media screen and (min-width: 1600px) {
	.c-range--full { max-width: none }
}

@media screen and (min-width: 1024px) {
	.c-range--business { margin-left: 55px; max-width: 75ch }
}

@media screen and (min-width: 1200px) {
	.c-range--business { margin-left: 85px; padding: 0 }
}

@media screen and (min-width: 1400px) {
	.c-range--business { margin-left: 125px }
}

@media screen and (min-width: 1600px) {
	.c-range--business { margin-left: 185px }
}

.c-range--electric { background-color: #f3f3f3; padding: 60px 0 }

@media screen and (min-width: 1200px) {
	.c-range--electric { padding: 60px 30px }
}

@media screen and (min-width: 1400px) {
	.c-range--electric { padding: 100px }
}

@media screen and (min-width: 768px) {
	.c-range__image { padding: 0 30px }
}

.c-range__split-title { font-size: 30px; font-size: 1.875rem; line-height: 36px; font-weight: 200; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-range__split-title { font-size: 40px; font-size: 27px; line-height: 46px }
}

.c-range__split-title span { font-weight: normal }

@media screen and (min-width: 1200px) {
	.c-range__split-title { padding: 0 }
}

.c-range__split-title--sml { font-size: 24px; font-size: 1.5rem; line-height: 30px }

.c-range__sub-title { font-size: 20px; font-size: 1.25rem; line-height: 26px; font-weight: 200; padding: 0 30px }

@media screen and (min-width: 1200px) {
	.c-range__sub-title { padding: 0 }
}

@media screen and (min-width: 670px) {
	.c-range__list { display: flex; flex-wrap: wrap }
}

@media screen and (min-width: 1200px) {
	.c-range__list--grid { margin: 0 -30px }
}

.c-range__list--info { color: #585858; margin: -10px 0 60px; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-range__list--info { padding-bottom: 0; padding-left: 45px; padding-right: 0; padding-top: 0 }
}

.c-range__list--electric { padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-range__list--electric { margin: 0 -5px }
}

@media screen and (min-width: 1200px) {
	.c-range__list--electric { padding: 0; max-width: 1360px }
}

@media screen and (min-width: 670px) {
	.c-range__list-item { width: 50% }
}

@media screen and (min-width: 1024px) {
	.c-range__list-item { width: 100% }
}

@media screen and (min-width: 1024px) {
	.c-range__list-item--grid { margin-bottom: 30px; width: 33.3333333333% }
}

@media screen and (min-width: 1024px) {
	.c-range__list-item--business { margin-bottom: 30px; width: 50% }
}

.c-range__list--info .c-range__list-item { list-style: disc; margin-left: 18px }

@media screen and (min-width: 768px) {
	.c-range__list--info .c-range__list-item { width: 100% }
}

@media screen and (min-width: 670px) {
	.c-range__list-image { max-width: 300px; padding: 0 30px }
}

@media screen and (min-width: 1200px) {
	.c-range__list-image { max-width: 350px }
}

@media screen and (min-width: 768px) {
	.c-range__list--test-drive .c-range__list-image { max-width: 330px }
}

@media screen and (min-width: 1400px) {
	.c-range__list--test-drive .c-range__list-image { max-width: 350px }
}

.c-range__list-tab { background-color: #fff; border: 3px solid #fff; display: block; margin: 10px 0; padding: 20px }

@media screen and (min-width: 768px) {
	.c-range__list-tab { margin: 10px 5px; padding-right: 0 }
}

@media screen and (min-width: 1200px) {
	.c-range__list-tab { padding-right: 20px }
}

.c-range__list-tab:focus { border: 3px solid #ff0012 }

.c-range__list-tab-content { pointer-events: none }

.c-range__info--plain::after { content: none }
.c-range__info--brochure::after { content: none }
.c-range__bottom { display: flex }
.c-range__content { margin-left: 10px; margin-right: auto; position: relative }

@media screen and (min-width: 768px) {
	.c-range__content { margin-right: 40px }
}

@media screen and (min-width: 768px) {
	.c-range__content--brochure { margin-right: 0 }
}

.c-range__content--electric::before { content: none }
.c-range__name { font-size: 20px; font-size: 1.25rem; line-height: 26px }
.c-range__cta-group { display: flex; flex-wrap: wrap; padding: 0 0 0 20px; margin-top: -20px; margin-bottom: 20px }

@media screen and (min-width: 768px) {
	.c-range__cta-group { padding: 0 0 0 46px }
}

@media screen and (min-width: 1024px) {
	.c-range__cta-group { margin-bottom: 0 }
}

@media screen and (min-width: 1200px) {
	.c-range__cta-group { padding: 0 0 0 88px }
}

.c-range__cta-item { padding-right: 15px }

@media screen and (min-width: 1400px) {
	.c-range__cta-item { padding-right: 20px }
}

.c-range__cta-item .c-quick-links__list-cta { padding: 0; text-decoration: underline; font-weight: 600 }

.c-range__cta-item .c-quick-links__list-cta:hover { color: #ff0012 }

.c-range__select { display: flex; margin-bottom: 30px; padding: 0 40px }

.c-range__buttons { margin-bottom: 30px; margin-top: -20px; padding: 0 30px }

@media screen and (min-width: 768px) {
	.c-range__buttons { padding-left: 45px }
}

.c-search-result__result-found { border-bottom: 1px solid #000; margin-bottom: 0; padding-bottom: 20px }
.c-search-result__red { color: #ff0012 }
.c-search-result__form form { display: flex }
.c-search-result__form .c-form__row { max-width: none }
.c-search-result__form .c-form__row--filters-btn { color: #fff; display: block; line-height: 45px; min-height: 45px; position: relative; overflow: hidden; padding: 0 20px; text-align: center; transition: color .35s ease-in-out; white-space: nowrap; width: -moz-max-content; width: max-content; z-index: 0; cursor: pointer; border-right: 16px solid #ff0012; min-width: 120px; margin-top: 0 }

.c-search-result__form .c-form__row--filters-btn::before { display: block; position: absolute; content: ""; background-color: #000; height: 100%; inset: 0 auto auto 0; opacity: 1; width: 100%; z-index: -1 }

@media screen and (min-width: 1200px) {
	.c-search-result__form .c-form__row--filters-btn::before { transition-duration: .35s }
}

.c-search-result__form .c-form__row--filters-btn::after { display: block; position: absolute; content: ""; height: 100%; left: 0; top: 0; width: 100%; z-index: -2 }

@media screen and (min-width: 1200px) {
	.c-search-result__form .c-form__row--filters-btn:hover { color: #000; transition: color .35s ease-in-out }
	.c-search-result__form .c-form__row--filters-btn:hover::before { width: 0; height: 100%; opacity: 1 }
	.c-search-result__form .c-form__row--filters-btn:hover .o-expand { border-color: #000; transition: border-color .35s ease-in-out }
	.c-search-result__form .c-form__row--filters-btn:hover .o-expand::after, .c-search-result__form .c-form__row--filters-btn:hover .o-expand::before { background-color: #000; transition: background-color .35s ease-in-out }
}

.c-search-result__form .c-form__row--filters-btn::after { background-color: #ff0012 }
.c-search-result__form .c-form__row--filters-btn input[type=submit] { background-color: rgba(0,0,0,0); margin: 0 !important; width: auto; padding: 0 }
.c-search-result__form .c-form__row--filters-btn:hover input[type=submit] { color: #000; transition: color .35s ease-in-out }
.c-search-result__form input[type=text] { line-height: 45px; width: 100% }
.c-search-result__form input[type=submit] { background-color: rgba(0,0,0,0); color: #fff; cursor: pointer; line-height: inherit; transition: color .35s ease-in-out }
.c-search-result__list-item { border-bottom: 1px solid #d8d8d8 }
.c-search-result__list-cta { display: block; padding: 10px 45px 10px 0; position: relative }
.c-search-result__list-cta::after { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/arrow.svg"); background-position: center center; background-repeat: no-repeat; background-size: 34px; bottom: 0; height: 100%; right: 0; top: 0; width: 40px }
.c-search-result__list-cta-title { display: block; }
.c-search-result__pagination { display: flex; justify-content: flex-end }
.c-search-result__pagination .c-section__results { margin: 0 }
.c-search-result__pagination .c-pagination { padding: 0 }
.c-search-result__pagination .c-pagination__cta { margin: 0 9px }
.c-search-result__no-result { margin-top: 20px }
.c-search-bar { align-items: center; display: flex; font-family: inherit; padding: 0 20px; text-decoration: none; width: 100% }

@media screen and (min-width: 1024px) {
	.c-search-bar { padding: 0; opacity: 1; margin: 0; max-width: none; right: 0; top: 0; height: 40px; transition: all .35s linear; z-index: 10; width: 94px }
}

@media screen and (min-width: 1024px) {
	.c-search-bar--focused { width: 190px; transition: all .35s linear }
}

@media screen and (min-width: 1024px) {
	.c-search-bar--focused .c-search-bar__input[type=search] { width: 100% }
}

.c-search-bar__input[type=search] { border: 0; background-color: rgba(0,0,0,0); margin-left: 0px; padding: 0 2px }

@media screen and (min-width: 1024px) {
	.c-search-bar__input[type=search] { height: 30px }
}

.c-search-bar__search-btn { display: none }
.c-section.hide { display: none }
.c-section--test-drive { margin-bottom: 100px }
.c-section--test-drive form { position: relative }

@media screen and (min-width: 1200px) {
	.c-section--test-drive-model { position: absolute; top: 0; left: 50%; right: 0; padding-left: 30px }
}

@media screen and (min-width: 1200px) {
	.c-section--test-drive-model .c-section__details { margin-top: 58px }
}

@media screen and (min-width: 1200px) {
	.c-section--test-drive-model .c-section__model-block { width: 50% }
}

@media screen and (min-width: 1200px) {
	.c-section--test-drive-note { width: 50%; margin-bottom: 30px }
}

.c-section--test-drive-address .c-form__row { display: flex; flex-wrap: wrap }
.c-section--test-drive-address .c-form__label { width: 100% }
.c-section--test-drive-address .form-text { flex: 1 }
.c-section--test-drive-address .description br { display: none }
.c-section--test-drive-address .description .c-form__button { margin-top: 0; border-radius: 0px; height: 45px; }

@media screen and (min-width: 768px) {
	.c-section--brochure { display: flex; margin-bottom: 80px; position: relative; }
}

.c-section--thank-you { padding: 30px 0 }

@media screen and (min-width: 768px) {
	.c-section--thank-you { padding: 80px 0 }
}

.c-section--form { display: flex; flex-direction: column; padding-bottom: 60px }
.c-mg-logo { margin-left: 10px; }
.c-hero__title { font-size: 40px; font-size: 2.5rem; line-height: 46px; font-weight: 200; margin-bottom: 0; position: relative; }

@media screen and (min-width: 1024px) {
	.c-hero__title { font-size: 60px; font-size: 3.75rem; line-height: 66px; }
}

@media screen and (min-width: 1200px) {
	.c-hero__title { font-size: 70px; font-size: 4.375rem; line-height: 76px; }
}

@media screen and (min-width: 768px) {
	.c-hero__title--light { color: #fff; }
}

.c-hero__title--arrow::before { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/arrow.svg"); background-position: left center; background-repeat: no-repeat; background-size: 34px; bottom: 0; height: 40px; left: -55px; top: auto; transform: rotate(90deg); width: 40px; }
.c-button--primary { color: #fff !important; display: block; line-height: 2.8125rem; min-height: 2.8125rem; position: relative; overflow: hidden; padding: 0 1.25rem; text-align: center; transition: color .35s ease-in-out; white-space: nowrap; width: -moz-max-content; width: max-content; z-index: 0; }
.c-button--primary::before { display: block; position: absolute; content: ""; background-color: #e10012; height: 100%; inset: 0 auto auto 0; opacity: 1; width: 100%; z-index: -1; }

@media screen and (min-width: 1200px) {
	.c-button--primary::before { transition-duration: .35s }
}

.c-button--primary::after { display: block; position: absolute; content: ""; height: 100%; left: 0; top: 0; width: 100%; z-index: -2; }

@media screen and (min-width: 1200px) {
	.c-button--primary:hover { color: #000; transition: color .35s ease-in-out }
	.c-button--primary:hover::before { width: 0; height: 100%; opacity: 1 }
	.c-button--primary:hover .o-expand { border-color: #000; transition: border-color .35s ease-in-out }
	.c-button--primary:hover .o-expand::after, .c-button--primary:hover .o-expand::before { background-color: #000; transition: background-color .35s ease-in-out }
}

.c-model__btn { margin-top: 10px; text-align: left; width: 100%; }

@media screen and (min-width: 768px) {
	.c-model__btn { max-width: 300px; min-width: 215px; width: auto; }
}

.c-button--black { border-right: 16px solid #000; }
.c-button--black::after { background-color: #000; }

.c-button--red { border-right: 16px solid #a00022 }

.c-button--red::after { background-color: #a00022; }
.c-video { display: block; position: relative; width: 100%; z-index: 1 }
.c-video--center { padding-bottom: 56.25%; }

@media screen and (min-width: 1200px) {
	.c-video--center { max-width: 1200px; margin: 0 auto }
}

@media screen and (min-width: 1600px) {
	.c-video--center { max-width: 1600px }
}

.c-video--split { margin-left: 30px; width: calc(100% - 30px) }

@media screen and (min-width: 1024px)and (min-width:1024px) {
	.c-video--split { display: flex; margin-left: 0; width: 50% }
}

.c-video--content { padding-bottom: 56.25% }

@media screen and (min-width: 1024px) {
	.c-video--content { margin-bottom: 30px; }
}

@media screen and (min-width: 1200px) {
	.c-video--content { max-width: 750px; min-height: 430px; padding-bottom: 0; }
}

.c-video__wrapper { position: relative; padding-bottom: 56.25% }

.c-video iframe, .c-video video { border: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100% }

@media screen and (min-width: 1024px) {
	.c-video iframe, .c-video video { max-height: 500px }
}

@media screen and (min-width: 1400px) {
	.c-video iframe, .c-video video { max-height: 600px }
}

@media screen and (min-width: 1600px) {
	.c-video iframe, .c-video video { max-height: 800px }
}

.c-video__inner { height: 100%; left: 0; padding: 30px; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 2 }

@media screen and (min-width: 768px) {
	.c-video__inner { padding-left: 30px; padding-right: 30px }
}

@media screen and (min-width: 1024px) {
	.c-video__inner { padding: 100px }
}

.c-video__inner--hide { opacity: 0; transition: opacity .35s ease-in-out; transition-delay: 1s }

.c-video__title { font-size: 30px; font-size: 1.875rem; line-height: 36px; color: #fff }

@media screen and (min-width: 768px) {
	.c-video__title { font-size: 40px; font-size: 2.5rem; line-height: 46px }
}

.c-video__title span { font-weight: 200 }

.c-video__poster { background-position: center bottom; background-repeat: no-repeat; background-size: cover; cursor: pointer; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 1 }

@media screen and (min-width: 1200px) {
	.c-video__poster { background-size: cover }
}

@media screen and (min-width: 1200px) {
	.c-video__poster:hover .c-video__play { filter: brightness(0) saturate(100%); transition: filter .35s ease-in-out }
}

.c-video__poster::after { background-color: rgba(0,0,0,.3); display: block; position: absolute; content: ""; height: 100%; left: 0; top: 0; width: 100% }

.c-video__poster--hide { opacity: 0; transition: opacity .35s ease-in-out; transition-delay: 1s; pointer-events: none }

.c-video__play { height: 68px; margin: 0 auto; pointer-events: none; position: relative; top: 0; width: 68px; z-index: 1 }

@media screen and (min-width: 768px) {
	.c-video__play { height: 100px; top: 0; width: 100px }
}

.c-video__play--center { top: 0 }

.c-video__mask { height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; width: 100% }

.c-video__mask--hide { opacity: 0; transition: opacity .35s ease-in-out; transition-delay: 1s; pointer-events: none }
.c-icon--left { transform: rotate(180deg) }

.c-icon--down { transform: rotate(90deg) }

.c-icon--quick-links { align-items: center; display: flex; height: 40px; justify-content: flex-start; margin-right: 0px; width: 24px }
.c-section__copy { font-size: 16px; font-size: 1rem; line-height: 22px; margin-bottom: 30px }

@media screen and (min-width: 1024px) {
	.c-section__copy { font-size: 18px; font-size: 1.125rem; line-height: 24px }
}

.c-section__copy--small { color: #585858; font-size: 15px; font-size: .9375rem; line-height: 24px; }

.c-section__copy p:last-of-type { margin-bottom: 0; }

@media screen and (min-width: 1024px) {
	.c-section__copy p { max-width: 75ch }
}

@media screen and (min-width: 1024px) {
	.c-section__copy h2 { max-width: 35ch }
}

.c-section__copy ol, .c-section__copy ul { list-style: inherit; margin-left: 28px; }

@media screen and (min-width: 1024px) {
	.c-section__copy ol, .c-section__copy ul { max-width: 70ch; }
}

.c-section__copy ol { list-style: decimal; }
.btn-info { color: #fff; background-color: #a00022; border-color: #a00022; }
.btn-info:hover { color: #fff; background-color: #a00022; border-color: #a00022; }
.btn-info.focus, .btn-info:focus { box-shadow: none; }
.btn-info.disabled, .btn-info:disabled { background-color: #a00022; border-color: #a00022; }
.btn-info:not([disabled]):not(.disabled).active, .btn-info:not([disabled]):not(.disabled):active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: #a00022; border-color: #a00022; box-shadow: none; }
.c-button--red:active, .c-button--red:focus { border-right: 16px solid #a00022; text-align: center; padding: 0 20px; }