/* YUI 3.9.0 (build 5827) Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */
html{color:#000;background-color:#e6e0db;overflow-y:scroll}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:""}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}legend{color:#000}
/* base
-------------------------------------- */
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
a:active { background-color: inherit; }
/* animations
-------------------------------------- */
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(40px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(40px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
/* global
-------------------------------------- */
html, body { background-color: #e6e0db; }
body {
	color: #000;
	font: 14px/1.5 Inter, Helvetica, Arial, sans-serif
}
p { color: #333; }
a {
	color: #fff;
	text-decoration: none;
}
a:hover, a:focus {
	text-decoration: none;
	color: #3a7ff8;
}
h1 {
	-moz-font-feature-settings: "liga" 1, "dlig" 1;
	-ms-font-feature-settings: "liga" 1, "dlig" 1;
	-webkit-font-feature-settings: "liga" 1, "dlig" 1;
	-o-font-feature-settings: "liga" 1, "dlig" 1;
	font-feature-settings: "liga" 1, "dlig" 1;
}

.buttonWhite a {
	display: inline-block;
	background-color: #fff;
	color: #000;
	font-size: 16px;
	padding: 10px 15px;
	border-radius: 5px;
}
.buttonWhite a:hover, .buttonWhite a:active, .buttonWhite a:focus {
	background-color: #3a7ff8;
	color: #fff;
	text-decoration: none !important;
}
.buttonBlack a {
	display: inline-block;
	background-color: transparent;
	color: #000;
	font-size: 16px;
	padding: 9px 14px;
	border: 1px solid #000;
	border-radius: 5px;
}
.buttonBlack a:hover, .buttonBlack a:active, .buttonBlack a:focus {
	background-color: #3a7ff8;
	color: #fff;
	border: 1px solid #3a7ff8;
	text-decoration: none !important;
}

/* fonts
-------------------------------------------------------------- */
@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: bold;
	font-display: swap;
	src:
		url("../fonts/inter-regular.woff2") format("woff2"),
		url("../fonts/inter-regular.woff") format("woff");
}
@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src:
		url("../fonts/inter-light.woff2") format("woff2"),
		url("../fonts/inter-light.woff") format("woff");
}
@font-face {
	font-family: GeelyFont;
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src:
		url("../fonts/geely.woff2") format("woff2"),
		url("../fonts/geely.woff") format("woff");
}


/* header
-------------------------------------- */
.whiteWrap {
	background-color: #000;
	height: 60px;
	width: 100%;
	position: fixed;
	padding: 0 15px;
	box-sizing: border-box;
	z-index: 1000;
}
.header {
	padding: 10px 0;
	margin: 0 auto;
	position: relative;
}
.groupLogo {
	position: relative;
	z-index: 10;
}
.groupLogo img {
	display: block;
	text-align: left;
	height: auto;
	max-width: 130px;
	margin-top: 10px;
}
.dealersOverview {
	display: block;
	position: absolute;
	top: 0;
	right: 5px;
	z-index: 10;
}
.dealersOverview h1 {
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	padding: 20px 0 0;
	line-height: 1.46;
}

@media screen and (min-width: 581px) {
	.whiteWrap {
		height: 80px;
		width: 100%;
		padding: 0 30px;
	}
	.header {
		
	}
	.groupLogo {
		position: absolute;
		left: 0;
		top: 5px;
	}
	.groupLogo img {
		max-width: 150px;
		margin-top: 23px;
	}

	.dealersOverview h1 {
		margin: 0 0 0 240px;
		padding-top: 24px;
		text-align: right;
		font-size: 20px;
	}
}

@media screen and (min-width: 1280px) {
	.whiteWrap {
		padding: 0 50px;
	}
	.header {
		height: 320px;
		margin: 0 auto;
	}
	.branding { opacity: 1; width: 360px; height: auto; }
	.groupLogo {
		position: absolute;
		left: 0;
		top: 0;
	}
	.groupLogo img {
		
	}
	.dealersOverview h1 {
		font-size: 22px;
	}
}

/* hero image
-------------------------------------- */
.banner-1 {
	background: #000 url("../../images/bg-hero.jpg") no-repeat 50% 0;
}
.banner-2 {
	background: #000 url("../../images/bg-hero-2.jpg") no-repeat 50% 0;
}
.banner-3 {
	background: #000 url("../../images/bg-hero-3.jpg") no-repeat 50% 0;
}
.banner-3 .desc {
	top: 50px;
	left: 15px;
}
.bannerWrap {
	background-color: #000;
	position: relative;
}
.bannerWrap:before, .bannerWrap:after { content: " "; display: table; }
.bannerWrap:after { clear: both; }
.bannerWrap {
	height: 680px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

.desc {
	color: #fff;
	position: absolute;
	bottom: 50px;
}
.desc span {
	font-family: GeelyFont, Arial, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	line-height: 1.6;
	letter-spacing: .5em;
}
.desc h2 {
	font-family: GeelyFont, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 1.4;
	margin-top: 10px;
	margin-bottom: 10px;
}
.desc p {
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
	margin-bottom: 20px;
	max-width: 800px;
}
.desc .buttonWhite {
	margin-top: 30px;
}

@media screen and (min-width: 581px) {
	.bannerWrap {
		height: 860px;
	}
	.banner-3 .desc {
		left: 30px;
	}
	.desc span {
		font-size: 12px;
	}
	.desc h2 {
		font-size: 40px;
	}
	.desc p {
		font-size: 20px;
	}
}

@media screen and (min-width: 1280px) {
	.bannerWrap {
		height: 960px;
	}
	.banner-3 .desc {
		left: 50px;
	}
}


/* video banner
-------------------------------------- */
.banner-1 .desc {
	right: 50px;
	text-align: right;
}
.banner-2 .desc {
	left: 50px;
	text-align: left;
}
.videoHero {
	display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  border-radius: inherit;
	height: 100%;
  width: 100%;
  aspect-ratio: inherit;
  overflow: hidden;
}
.videoHero .title,
.videoHero .specs,
.videoHero .cta {
	position: absolute;
}
.videoHero .title {
	top: 100px;
	margin: 0 15px;
}
.videoHero .title span {
	color: #fff;
	font-size: 11px;
	text-transform: uppercase;
	line-height: 1.6;
	letter-spacing: .5em;
}
.videoHero .title h1 {
	font-family: GeelyFont, Arial, sans-serif;
	line-height: 1.2;
	font-size: 30px;
	color: #fff;
	margin-top: 10px;
	text-transform: uppercase;
}
.videoHero .title p {
	font-weight: 300;
	font-size: 16px;
	color: #fff;
	max-width: 800px;
}
.videoHero .specs {
	bottom: 100px;
	left: 15px;
}
.videoHero .spec-info {
	color: #fff;
	border-left: 1px solid #fff;
	padding-left: 20px;
	margin-bottom: 20px;
}
.videoHero .spec-info span {
	font-size: 12px;
}
.videoHero .spec-info h3 {
	font-family: GeelyFont, Arial, sans-serif;
	font-size: 24px;
}
.videoHero .spec-info p {
	color: #fff;
	font-size: 14px;
}
.videoHero .cta {
	bottom: 50px;
	left: 15px;
}
.videoHero video {
	min-height: 100%;
  object-fit: cover;
  aspect-ratio: inherit;
  display: inline-block;
  height: auto;
  object-fit: contain;
  touch-action: manipulation;
  border-radius: inherit;
}

@media screen and (min-width: 581px) {
	.videoHero video {
		width: 100%;
	}
	.videoHero .title {
		margin: 0 30px;
		top: 100px;
	}
	.videoHero .title span {
		font-size: 12px;
	}
	.videoHero .title h1 {
		font-size: 36px;
	}
	.videoHero .title p {
		font-size: 18px;
	}
	.videoHero .specs {
		bottom: 120px;
		left: 30px;
		display: flex;
		column-gap: 40px;
	}
	.videoHero .spec-info {
		margin-bottom: 0;
	}
	.videoHero .cta {
		left: 30px;
	}
}

@media screen and (min-width: 1280px) {
	.videoHero .title {
		top: 150px;
		left: 50px;
		margin: 0;
	}
	.videoHero .title h1 {
		font-size: 40px;
	}
	.videoHero .title p {
		font-size: 20px;
	}
	.videoHero .specs {
		bottom: 80px;
		left: 50px;
		display: flex;
		column-gap: 200px;
	}
	.videoHero .cta {
		bottom: 80px;
		left: auto;
		right: 50px !important;
	}
}

/* content
-------------------------------------- */
.contentWrap {
	position: relative;
	padding: 0 0 30px;
}
.contentWrap:before, .contentWrap:after { content: " "; display: table; }
.contentWrap:after { clear: both; }

.content span {
	font-family: GeelyFont, Arial, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	line-height: 1.6;
	letter-spacing: .5em;
}
.content h2 {
	font-family: GeelyFont, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 1.2;
	margin-top: 10px;
	margin-bottom: 10px;
}
.content p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	margin-bottom: 20px;
}

.bodyCopy-1 {
	margin: 50px 15px 15px;
}
.bodyCopy-1 p {
	max-width: 800px;
}

@media screen and (min-width: 581px) {
	.content span {
		font-size: 12px;
	}
	.content h2 {
		font-size: 40px;
	}
	.content p {
		font-size: 18px;
	}
	.bodyCopy-1 {
		margin: 60px 30px 20px;
	}
}

@media screen and (min-width: 1280px) {
	.content p {
		font-size: 20px;
	}
	.bodyCopy-1 {
		max-width: 1690px;
		margin: 80px auto 40px;
		padding: 0 50px;
	}
}

/* gallery
-------------------------------------- */
.gallery {
	margin: 0 15px 60px;
}
.gallery img {
	max-width: 100%;
	border-radius: 10px;
}
.gallery .img-1 {
	margin-bottom: 10px;
}
.gallery p {
	font-size: 16px;
	margin-top: 30px;	
}

@media screen and (min-width: 581px) {
	.gallery {
		margin: 0 30px 60px;
		display: flex;
		column-gap: 20px;
	}
	.gallery .img-1 {
		max-width: 60%;
		margin-bottom: 0;
	}
	.gallery .img-2 {
		max-width: 40%;
	}
}

@media screen and (min-width: 1280px) {
	.gallery {
		max-width: 1690px;
		margin: 0 auto 80px;
		padding: 0 50px;
	}
}

/* features
-------------------------------------- */
.features {
	margin: 0 15px;
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 20px;
}
.features .card img {
	width: 100%;
	border-radius: 10px;
}
.features .card h3 {
	font-size: 16px;
}
.features .card p {
	font-size: 14px;
}

@media screen and (min-width: 581px) {
	.features {
		margin: 0 30px;
	}
	.features .card {
		width: 48.5%;
	}
	.features .card h3 {
		font-size: 18px;
	}
	.features .card p {
		font-size: 16px;
	}
}

@media screen and (min-width: 1280px) {
	.features {
		max-width: 1690px;
		margin: 0 auto;
		padding: 0 50px;
	}
	.features .card {
		width: 24%;
	}
}

/* footer
-------------------------------------- */
.disclaimers {
	margin: 30px 15px;
	padding-top: 30px;
	border-top: 1px solid #333;
}
.disclaimers p {
	font-size: 11px;
	margin: 0;
}

.footerWrap {
	position: relative;
	background-color: #000;
}
.footerWrap:before, .footerWrap:after, .footer:before, .footer:after { content: " "; display: table; }
.footerWrap:after, .footer:after { clear: both; }
.dealerDetails {
	margin: 50px 15px 20px;
}
.dealerDetails h3 {
	font-family: GeelyFont, Arial, sans-serif;
	color: #fff;
	text-transform: uppercase;
	font-size: 22px;
	margin-bottom: 10px;
}
.dealerDetails p {
	color: #fff;
	font-size: 16px;
	margin-bottom: 10px;
}
.footer {
	padding: 5px 0;
	margin: 50px 15px;
	border-top: 1px solid #8e8e8e;
}
.footer .copyright {
	color: #fff;
	padding: 4px 12px 0 0;
	font-weight: 300;
	font-size: 12px;
	text-align: left;
}
.footer .copyright a {
	display: inline-block;
	margin: 0 0 0 6px;
	color: #8e8e8e;
}
.footer .copyright a:hover, .footer .copyright a:focus { color: #1d1d1d; }
.footerMattaki {
	width: 80px;
	height: 20px;
	margin: 20px 0 0;
	display: block;
	background: url("../../images/logo-mattaki.png") no-repeat;
	-o-background-size: 80px 40px;
	-webkit-background-size: 80px 40px;
	background-size: 80px 40px;
}
.footerMattaki:hover, .footerMattaki:focus { background-position: 0 -20px; }

@media screen and (min-width: 581px) {
	.disclaimers {
		margin: 40px 30px;
	}
	.disclaimers p {
		font-size: 12px;
	}

	.dealerDetails {
		margin: 70px 30px 20px;
	}
	.dealerDetails h3 {
		font-size: 24px;
	}
	.dealerDetails p {
		font-size: 18px;
	}

	.footer {
		margin: 50px 30px;
	}
	.footer .copyright { margin-top: 10px; float: left; }
	.footerMattaki {
		margin: 15px 14px 0 0;
		width: 80px;
		height: 20px;
		float: right;
	}
}
@media screen and (min-width: 1280px) {
	.disclaimers {
		max-width: 1690px;
		margin: 60px auto;
		padding: 30px 50px 0;
	}

	.dealerDetails {
		max-width: 1690px;
		margin: 100px auto 60px;
		padding: 0 50px;
	}
	.deaerDetails h3 {
		font-size: 26px;
	}
	.dealerDetails p {
		font-size: 20px;
	}

	.footer {
		max-width: 1690px;
		margin: 50px auto;
		padding: 5px 50px;
	}
	.footer .copyright { margin-top: 12px; float: left; }
	.footerMattaki {
		margin: 16px 14px 0 0;
		width: 80px;
		height: 20px;
		float: right;
	}
}

/* print (put @ bottom of css)
-------------------------------------- */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
.dealerList > li { min-height: 0!important; }
.groupLogo img { width: 220px; height: 86px; }
.header h1 { padding: 4px 18px; }
}