﻿/*.tab-title { display: flex; width: 100%; padding: 110px 0px 60px 0px; }*/
/*.tab-title li { display: block; line-height: 58px; font-size: 1.5rem; width: 100%; padding: 0px 0px; }*/
/*.tab-title li.active { font-weight: 400; background-color: #ebebeb; }*/
.tab-content li { display: none; }
.tab-content li.active { display: block; }
.view-car-products-entity-brochure { display: none; }
.c-range__list-item { cursor: pointer; }
.active { display: block; }
.c-range__list-item--grid { margin-bottom: 60px; }
.tab-title { padding: 0 0 6rem 0; font-size: 1rem; }
@media screen and (min-width: 320px) and (max-width: 820px) {
	.tab-title { padding: 0 0 3.75rem 0; font-size: 1rem; }
	.tab-title li { font-size: 1.1rem; }
}

.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: 768px) {
	.c-form__row { max-width: 320px; }
}

.js-filter-guidelines, .description { line-height: 20px !important; margin-top: .25rem; }
.c-form__button { text-align: left; width: 100%; }

@media screen and (min-width: 768px) {
	.c-form__button { width: auto; }
}

@media screen and (min-width: 1200px) {
	.c-form { margin-bottom: 100px }
}

@media screen and (min-width: 768px) {
	.c-form--px { padding: 60px 0 }
}

@media screen and (min-width: 768px) {
	.c-form--filters { display: flex; flex-wrap: wrap }
}

@media screen and (min-width: 1200px) {
	.c-form--filters { margin-bottom: 0 }
}

.c-form__title { font-size: 30px; font-size: 1.875rem; line-height: 36px; font-weight: 200 }

@media screen and (min-width: 768px) {
	.c-form__title { font-size: 40px; font-size: 2.5rem; line-height: 46px }
}

.c-form__title span { font-weight: normal }

.c-form__input--hidden { display: none }

@media screen and (min-width: 768px) {
	.c-form__group { display: flex }
}

.c-form__row { margin-bottom: 0; width: 100% }

@media screen and (min-width: 768px) {
	.c-form__row { max-width: 320px }

	.c-form--filters .c-form__row { margin-right: 1em }
}

.c-form__row--checkbox { display: flex; flex-wrap: wrap }

@media screen and (min-width: 768px) {
	.c-form__row--copy { max-width: 60ch }
}

@media screen and (min-width: 1024px) {
	.c-form__row--copy { margin-top: 60px }
}

@media screen and (min-width: 768px) {
	.c-form__group .c-form__row { margin-right: 30px }
}

.c-form__row--split { display: flex; justify-content: space-between }

@media screen and (min-width: 768px) {
	.c-form--filters .c-form__row { max-width: none; width: calc(50% - 15px) }
}

@media screen and (min-width: 1024px) {
	.c-form--filters .c-form__row { width: calc(27.5% - 15px) }

	.c-form--filters .c-form__row:nth-child(4) { width: calc(17.5% - 15px) }
}

@media screen and (min-width: 1024px) {
	.c-form--filters .c-form__row--filters-btn { width: calc(72.5% - 7.5px) }
}

.c-form__row.hidden { display: none }

.c-form__select, .c-form .form-select { background-color: #fff; background-image: url("https://www.mgmotor.co.za/svg/chevron.svg"); background-position: center right 10px; background-repeat: no-repeat; background-size: 13px 8px;font-size: 15px; font-size: .9375rem; line-height: 2; padding-right: 35px; position: relative }

.c-form__hidden-area { display: none }

.c-form__checkbox { margin-bottom: 0; margin-top: 0; width: 33.3333333333% }

.c-form__checkbox input[type=checkbox] { display: none; display: none }

.c-form__checkbox input[type=checkbox] + label:before { content: ""; background-color: #fff; border: 1px solid #d8d8d8; display: inline-block; height: 26px; margin-right: .75rem; vertical-align: -30%; width: 26px }

.c-form__checkbox input[type=checkbox]:checked + label:before { background-color: #000 }

.c-form__checkbox input[type=checkbox]:checked + label:after { content: ""; left: 9.5px; top: 5.2px; width: 6.5px; height: 13px; border: solid #fff; border-width: 0 2px 2px 0; position: absolute; transform: rotate(45deg) }

.c-form__checkbox--full { width: 100% }

.c-form__checkbox--small { margin-right: 15px; width: auto }

.c-form__checkbox--small:last-of-type { margin-right: 0 }

.c-form__checkbox--small input[type=checkbox] { display: none; display: none }

.c-form__checkbox--small input[type=checkbox] + label:before { content: ""; background-color: #fff; border: 1px solid #d8d8d8; display: inline-block; height: 20px; margin-right: .75rem; vertical-align: -30%; width: 20px }

.c-form__checkbox--small input[type=checkbox]:checked + label:before { background-color: #000 }

.c-form__checkbox--small input[type=checkbox]:checked + label:after { content: ""; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; position: absolute; transform: rotate(45deg) }

.c-form__checkbox--small label { line-height: 1 }

.c-form__radio input[type=radio] { display: none; display: none }

.c-form__radio input[type=radio] + label:before { content: ""; background-color: #fff; border: 1px solid #d8d8d8; display: inline-block; height: 26px; margin-right: .75rem; vertical-align: -30%; width: 26px }

.c-form__radio input[type=radio]:checked + label:before { background-color: #000 }

.c-form__radio input[type=radio]:checked + label:after { content: ""; left: 9.5px; top: 5.2px; width: 6.5px; height: 13px; border: solid #fff; border-width: 0 2px 2px 0; position: absolute; transform: rotate(45deg) }

.c-form__radio input[type=radio] + label:before { border-radius: 50% }

.c-form__radio input[type=radio]:checked + label:after { content: ""; border: 6px solid #fff; border-radius: 50%; display: inline-block; height: 22px; left: 2px; position: absolute; top: -4px; width: 22px }

.c-form__field--full { width: 100% }

.c-form__field--select:nth-child(2) { margin-top: 20px }

.c-form__field--split { width: calc(50% - 10px) }

.c-form__field--split:nth-child(2) { margin-top: 0 }

.c-form__terms { font-size: 14px; font-size: .875rem; line-height: 22px; color: #a2a2a2; margin-bottom: 30px }

@media screen and (min-width: 768px) {
	.c-form__terms { max-width: 60ch }
}

.c-form__terms-cta { text-decoration: underline }

.c-form__button { text-align: left; width: 100% }

@media screen and (min-width: 768px) {
	.c-form__button { width: auto }
}

.c-form__button--search { width: auto }

.c-grid__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 }

.c-grid__list-item { position: relative; width: 100% }

@media screen and (min-width: 1024px) {
	.c-grid__list-item { width: 50% }
}

@media screen and (min-width: 1200px) {
	.c-grid__list-item { max-height: 575px; overflow: hidden }
}

.c-grid__list-item--50 { overflow: hidden; padding-bottom: 60%; width: 100% }

@media screen and (min-width: 1024px) {
	.c-grid__list-item--50 { padding-bottom: 0; width: 25% }
}

.c-grid__list-item--50 picture { height: 100%; left: 0; position: absolute; top: 0; width: 100% }

@media screen and (min-width: 1200px) {
	.c-grid__list-item:hover .c-media { transform: scale(1.05); transition: transform .35s ease-in-out }

	.c-grid__list-item:hover .c-grid__list-cta--electric { background-color: #40bed4; transition: background-color .35s ease-in-out }

	.c-grid__list-item:hover .c-grid__list-cta--solid-light { background-color: #f3f3f3; transition: background-color .35s ease-in-out }

	.c-grid__list-item:hover .c-grid__list-cta--solid-dark { background-color: #1a1a1a; transition: background-color .35s ease-in-out }
}

.c-grid__list-cta { color: #fff; height: 100%; left: 0; padding: 20px; position: absolute; top: 0; width: 100% }

@media screen and (min-width: 768px) {
	.c-grid__list-cta { padding: 40px }
}

.c-grid__list-cta--solid-light { color: #000; transition: background-color .35s ease-in-out }

.c-grid__list-cta--solid-dark { background-color: #000; color: #fff; transition: background-color .35s ease-in-out }

.c-grid__list-cta--black { color: #000 }

.c-grid__list-cta--electric { background-color: #6accdd; background-image: url("https://www.mgmotor.co.za/svg/electric-icon-white.svg"); background-position: bottom 20px right 20px; background-repeat: no-repeat; background-size: 130px 121px; display: block; transition: background-color .35s ease-in-out }

@media screen and (min-width: 768px) {
	.c-grid__list-cta--electric { background-size: 186px 173px; background-position: bottom 40px right 40px }
}

@media screen and (min-width: 1024px) {
	.c-grid__list-cta--electric { background-position: bottom 20px right 20px; background-size: 130px 121px }
}

@media screen and (min-width: 1200px) {
	.c-grid__list-cta--electric { background-size: 186px 173px; background-position: bottom 40px right 40px }
}

.c-grid__list-title { font-size: 24px; font-size: 1.5rem; line-height: 30px; font-weight: 200 }

@media screen and (min-width: 768px) {
	.c-grid__list-title { font-size: 46px; font-size: 2.875rem; line-height: 52px }
}

@media screen and (min-width: 1024px) {
	.c-grid__list-title { font-size: 24px; font-size: 1.5rem; line-height: 30px }
}

@media screen and (min-width: 1400px) {
	.c-grid__list-title { font-size: 46px; font-size: 2.875rem; line-height: 52px }
}

.c-grid__list-title::after { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/arrow.svg"); background-repeat: no-repeat; background-size: 50px 34px; filter: invert(1); margin-top: 5px; height: 34px; width: 50px }

.c-grid__list-title.has-subtitle { margin-bottom: 0 }

.c-grid__list-title.has-subtitle::after { display: none }

.c-grid__list-cta--solid-light .c-grid__list-title::after, .c-grid__list-cta--solid-black .c-grid__list-title::after, .c-grid__list-cta--black .c-grid__list-title::after { filter: none }

.c-grid__list-subtitle { font-size: 12px; font-size: .75rem; line-height: 14px }

@media screen and (min-width: 768px) {
	.c-grid__list-subtitle { font-size: 20px; font-size: 1.25rem; line-height: 23px }
}

@media screen and (min-width: 1024px) {
	.c-grid__list-subtitle { font-size: 12px; font-size: .75rem; line-height: 14px }
}

@media screen and (min-width: 1200px) {
	.c-grid__list-subtitle { font-size: 20px; font-size: 1.25rem; line-height: 23px }
}

.c-grid__list-subtitle::after { display: block; position: absolute; content: ""; background-image: url("https://www.mgmotor.co.za/svg/arrow.svg"); background-repeat: no-repeat; background-size: 50px 34px; filter: invert(1); margin-top: 5px; height: 34px; width: 50px }

.c-grid__list-tc { font-size: 12px; font-size: .75rem; line-height: 14px; position: absolute; padding: 0 20px; margin: 0; right: 0px; bottom: 20px; max-width: 370px; text-align: end }

@media screen and (min-width: 768px) {
	.c-grid__list-tc { font-size: 16px; font-size: 1rem; line-height: 18px; padding: 0 20px; bottom: 20px; max-width: 560px }
}

@media screen and (min-width: 1024px) {
	.c-grid__list-tc { font-size: 12px; font-size: .75rem; line-height: 14px; max-width: 440px }
}

@media screen and (min-width: 1200px) {
	.c-grid__list-tc { max-width: 560px; font-size: 16px; font-size: 1rem; line-height: 18px }
}

.c-section__inner { padding: 30px }

@media screen and (min-width: 1024px) {
	.c-section__inner { padding: 100px }
}

.c-section__inner--center { padding: 0 30px }

@media screen and (min-width: 1200px) {
	.c-section__inner--center { padding-left: 100px; padding-right: 100px }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--center { padding-left: 140px; padding-right: 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--center { max-width: 1600px; padding-left: 200px; padding-right: 200px }
}

.c-section__inner--steps { padding: 0 30px }

@media screen and (min-width: 1200px) {
	.c-section__inner--steps { max-width: 1600px; padding: 0 100px; width: 100% }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--steps { padding: 0 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--steps { padding: 0 200px }
}

.c-section__inner--brochure { padding: 0 30px }

@media screen and (min-width: 1200px) {
	.c-section__inner--brochure { max-width: 1600px; padding: 0 80px; width: 100% }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--brochure { padding: 0 120px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--brochure { padding: 0 200px }
}

@media screen and (min-width: 1024px) {
	.c-section__inner--shallow { padding-bottom: 50px; padding-top: 50px }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--shallow { padding-left: 140px; padding-right: 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--shallow { padding-left: 200px; padding-right: 200px }
}

@media screen and (min-width: 768px) {
	.c-section__inner--slider { padding-left: 90px; padding-right: 90px }
}

@media screen and (min-width: 1024px) {
	.c-section__inner--slider { padding: 0 90px }
}

@media screen and (min-width: 1200px) {
	.c-section__inner--slider { padding: 20px 100px }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--slider { padding-left: 140px; padding-right: 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--slider { max-width: 1600px; padding-left: 200px; padding-right: 200px }
}

.c-section__inner--widget { padding: 30px 0 }

@media screen and (min-width: 1024px) {
	.c-section__inner--widget { max-width: 1084px; padding: 30px; width: 100% }
}

@media screen and (min-width: 1200px) {
	.c-section__inner--widget { max-width: 1124px; padding-left: 100px; padding-right: 0 }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--widget { max-width: 1164px; padding-left: 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--widget { max-width: 1224px; padding-left: 200px }
}

.c-section__inner--form { order: 3; padding-top: 0 }

@media screen and (min-width: 768px) {
	.c-section__inner--form { order: 2; width: 50% }
}

@media screen and (min-width: 1024px) {
	.c-section__inner--form { padding-right: 0 }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--form { padding-left: 140px; padding-right: 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--form { padding-left: 200px; padding-right: 0 }
}

@media screen and (min-width: 1200px) {
	.c-section__inner--used-result { max-width: 320px; padding: 0; width: 100% }
}

@media screen and (min-width: 1400px) {
	.c-section__inner--standard { padding: 100px 140px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--standard { max-width: 1600px; padding: 100px 200px }
}

.c-section__inner--models { margin: 30px 0; padding: 0 30px }

@media screen and (min-width: 1400px) {
	.c-section__inner--media-centre { margin-left: 40px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--media-centre { margin-left: 100px }
}

.c-section__inner--search-result { padding: 30px }

@media screen and (min-width: 1024px) {
	.c-section__inner--search-result { padding: 0 80px 100px }
}

@media screen and (min-width: 1600px) {
	.c-section__inner--search-result { padding-left: 200px; padding-right: 200px }
}

.c-section__title { font-size: 40px; font-size: 2.5rem; line-height: 46px; font-weight: 200; position: relative }
.c-section--test-drive { display: none; }
.c-hero { /*margin-top: -60px;*/ position: relative }

@media screen and (min-width: 1024px) {
	.c-hero { /*margin-top:-100px*/ }
}

.c-hero--carousel { margin-top: 0 }

.c-hero--product { padding-bottom: 30px }

@media screen and (min-width: 768px) {
	.c-hero--product { padding-bottom: 0 }
}

@media screen and (min-width: 1200px) {
	.c-hero--product { position: relative }

	.c-hero--product::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: 50px; bottom: 20px; height: 50px; left: 40px; top: auto; transform: rotate(90deg); width: 50px }
}

@media screen and (min-width: 1600px) {
	.c-hero--product::before { background-size: 80px; height: 80px; left: 60px; width: 80px }
}

.c-hero--shallow { overflow: hidden }

.c-hero--awards { margin-bottom: 40px }

@media screen and (min-width: 1024px) {
	.c-hero--awards { margin-bottom: 80px }
}

.banner-text-win { position: absolute; top: 25%; }

@media screen and (min-width: 1200px) {
	.c-range--grid { padding-bottom: 0px; }
}

[type=checkbox]:checked + label, [type=checkbox]:not(:checked) + label { position: relative; cursor: pointer; display: block; }
.c-form__label { font-weight: 700; color: #000; }
#testDriveForm select, #testDriveForm input { border: red 1px solid; }
.terms_and_conditions a { text-decoration: underline; }
.link-file { text-decoration: underline; }
