/* === HOME === */

body.home
{
	padding: 0;
}

body.home header {
	position: relative;
}
main:before { display: none; content: ''; height: 0; transition: height 0.2s ease; }

body.home #header-wrapper
{
	width: 100%;
	height: 120px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: transparent;
	background: linear-gradient(180deg, rgba(0,154,155,0.3) 0%, rgba(0,0,0,0) 100%);
	background-size: auto;
	background-position: 0% 0%;
	transition: none;
}
body.home #header-wrapper:before,
body.home #header-wrapper:after { display: none; width: 0; height: 0; transition: none; }
body.home #header-content { max-width: 100%; }

body.home nav#lang-nav
{
	position: absolute;
	top: 100px;
	right: 0;
	margin: 0;
	padding: 0;
	width: 200px;
}
body.home nav#lang-nav > ul
{
	position: relative;
	right: auto;
	top: auto;
	width: auto;
	transition: top 0s linear;
}
body.home nav#lang-nav > ul > li > a
{
	color: #fcfcfc;
	background-color: rgba(0,154,155,0.65);
	border-color: rgba(0,154,155, 0.65);
}
body.home nav#lang-nav > ul > li[aria-current=true] > a
{
	color: #fcfcfc !important;
	background-color: rgba(0,0,0, 0.65) !important;
	border-color: rgba(0,0,0, 0.65) !important;
	pointer-events: none;
	cursor: default;
}
body.home nav#lang-nav > ul > li > a:hover,
body.home nav#lang-nav > ul > li > a:focus
{
	color: #fcfcfc;
	background-color: #f9b234;
	border-color: #f9b234;
}
body.home nav#lang-nav > ul > li > a:active
{
	color: #fcfcfc;
	background-color: #fc8b4c;
	border-color: #fc8b4c;
}

body.home footer
{
	position: relative;
	left: auto;
	bottom: auto;
}


body.home main {
	margin: 0;
	padding: 0;
	width: 100%;
	transition: none;
}

body.home main h1
{
	height: 0;
	padding: 0;
	margin: 0;
	line-height: 0;
	overflow: hidden;
	text-indent: -99999px;
}

body.home main h2
{
	width: 1200px;
	max-width: 100%;
	margin: 0.5em auto 1.2em auto;
	padding: 40px 40px 0 40px;
	box-sizing: border-box;
}

body.home #wrapper
{
	margin: 0 auto;
	width: 1200px;
	max-width: 100%;
	padding: 0 40px 100px 40px;
}
body.home #content
{
	font-size: 16px;
	line-height: 24px;
}


#carousel
{
	position: relative;
	display: block;
	width: 100%;
	height: calc(100vw / 16 * 9);
	aspect-ratio: 16/9;
	vertical-align: top;
	margin: 0;
	padding: 0;
	background-color: #3c3c3b;
	overflow: hidden;
	position: relative;
}
#carousel > div.carouselSlide {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 100vw;
	height: calc(100vw / 16 * 9);
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center center;
	animation-delay: 0s;
}
#carousel > div.carouselCurrent { left: 0; display: block; }

#carousel > div.carouselInRight
{
	display: block;
	left: 100vw;
	animation: slidein_right 3s ease forwards;
}
#carousel > div.carouselOutLeft
{
	display: block;
	animation: slideout_left 3s ease forwards;
}

#carousel > div.carouselInLeft
{
	display: block;
	left: -100vw;
	animation: slidein_left 3s ease forwards;
}
#carousel > div.carouselOutRight
{
	display: block;
	animation: slideout_right 3s ease forwards;
}

@keyframes slidein_right
{
	from { left: 100vw; }
	to   { left: 0; }
}
@keyframes slideout_left
{
	from { left: 0; }
	to   { left: -100vw; }
}
@keyframes slidein_left
{
	from { left: -100vw; }
	to   { left: 0; }
}
@keyframes slideout_right
{
	from { left: 0; }
	to   { left: 100vw; }
}

#carousel > div.carouselSlide video
{
	width: 100vw;
	height: auto;
	aspect-ratio: 854/480;
	object-fit: cover;
	object-position: center center;
	margin: 0;
	padding: 0;
}
#carousel > div.carouselSlide video img { display: block; width: 100%; height: auto; }

#carousel > ul.carouselControls
{
	display: block;
	position: absolute;
	right: 48px;
	bottom: 28px;
	white-space: nowrap;
	z-index: 1000;
	margin: 0;
	padding: 0;
	height: 8px;
}
#carousel > ul.carouselControls li
{
	display: inline-block;
	width: 20px;
	height: 8px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px rgba(255,255,255,0.5) solid;
	border-radius: 4px;
	background-color: rgba(255,255,255,0.1);
	cursor: pointer;
	transition: background-color 0.4s ease;
}
#carousel > ul.carouselControls li + li { margin-left: 16px; }
#carousel > ul.carouselControls li:hover { background-color: rgba(255,255,255,0.4); }
#carousel > ul.carouselControls li[aria-current=true] { background-color: rgba(255,255,255,0.7); cursor: default; }
#carousel > ul.carouselControls.animating li { cursor: default; }
#carousel > ul.carouselControls.animating li:hover { background-color: rgba(255,255,255,0.1); }
#carousel > ul.carouselControls.animating li[aria-current=true]:hover { background-color: rgba(255,255,255,0.8); }

#teaserStage #autoVisionChinaJingle
{
	color: #fcfcfc;
	font-size: 15px;
	font-weight: bold !important;
	letter-spacing: 0.02em;
	text-align: center;
	position: absolute;
	transform: translate(-50%, 0);
	left: 50%;
	bottom: 52px;
	z-index: 100;
	text-shadow: 0 0 6px rgba(210,210,210, 0.4), 0 0 2px rgba(15,46,46, 0.5);
}
#teaserStage #autoVisionChinaJingle small { font-size: 14px; }
#teaserStage #autoVisionChinaJingle big { font-size: 16px; }
#teaserStage #autoVisionChinaJingle a
{
	white-space: nowrap;
	color: #f9b234;
	text-decoration: none;
	transition: color 0.25s ease;
}
#teaserStage #autoVisionChinaJingle a:hover,
#teaserStage #autoVisionChinaJingle a:focus { color: #ffc568; }
#teaserStage #autoVisionChinaJingle a:active { color: #fc8b4c; }
#teaserStage #autoVisionChinaJingleIntro { white-space: nowrap; }


@media screen and (max-width: 1080px) {
	body.home nav#lang-nav { width: 185px; }
}


@media screen and (max-width: 480px) {
	header a#site-logo { right: 26px; }
	body.home nav#lang-nav { width: 172px; }
	main:before
	{
		content: '';
		display: block;
		height: 148px;
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: #3C3C3B;
		background-image: url('../assets/backgrounds/header4a.jpg');
		background-repeat: no-repeat;
		background-position: center 40%;
		background-size: cover;
		border-bottom: 5px #3c3c3b solid;
	}
	body.home #header-wrapper
	{
		background: linear-gradient(180deg, rgba(0,154,155,0.0) 0%, rgba(0,154,155,0.1) 50%, rgba(0,99,98,0.2) 100%);
		height: 148px;
	}
	body.home nav#lang-nav { top: 95px; }
	body.home nav#lang-nav > ul > li[aria-current=true] > a { border-color: rgba(178,178,178,0.5) !important; }
	#teaserStage #autoVisionChinaJingle
	{
		font-size: 12px !important;
		line-height: 18px;
		bottom: auto;
		top: 9px;
	}
	#teaserStage #autoVisionChinaJingle small { font-size: 12px; }
	#teaserStage #autoVisionChinaJingle big { font-size: 13px; }
	#carousel > ul.carouselControls { bottom: 20px; right: 12px; }
}
@media screen and (orientation: landscape) and (max-height: 480px) {
	#teaserStage #autoVisionChinaJingle  { bottom: 32px; }
	#carousel > ul.carouselControls { bottom: 14px; right: 12px; }
}


body.home aside { margin-top: 0; padding-top: 2px; padding-bottom: 0; border-left-color: transparent; }
body.home aside p {
	max-width: 190px;
	font-size: 18px;
	font-weight: 700;
	padding-top: 0;
	color: #009A9B;
	text-align: center;
	margin: 7px auto 16px auto;
}
#mostValuableBrands
{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 170px;
	height: 370px;
	box-sizing: border-box;
	overflow: hidden;
}
#mostValuableBrandsBefore,
#mostValuableBrandsAfter
{
	display: block;
	padding: 0;
	width: 170px;
	height: 1px;
	background-color: #009A9B40;
}
#mostValuableBrandsBefore
{
	margin: 0 auto 2px auto;
	box-shadow: 0 -2px 2px #009A9B20;
}
#mostValuableBrandsAfter
{
	margin: 2px auto 0 auto;
	box-shadow: 0 2px 2px #009A9B20;
}
#mostValuableBrands div.brand
{
	width: 140px;
	height: 140px;
	display: block;
	margin: 10px auto 0 auto;
	padding: 5px;
	position: relative;
	animation-delay: 0s;
}
#mostValuableBrands div.brand:before
{
	content: '';
	display: block;
	position: absolute;
	width: 130px;
	height: 1px;
	left: 10px;
	top: -6px;
	background-color: #dddddc;
}
#mostValuableBrands div.brand:first-child { margin-top: 0; }
#mostValuableBrands div.brand:first-child:before { display: none; }
#mostValuableBrands div.brand a
{
	display: block;
	margin: 0;
	padding: 0;
	width: 130px;
	height: 130px;
	border: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
#mostValuableBrands div.slideOut
{
	animation: brands_slideout_top 2s ease forwards;
}

@keyframes brands_slideout_top
{
	from { opacity: 1; margin-top: 0; }
	to   { opacity: 0; margin-top: -150px; }
}

@keyframes brands_slideout_left
{
	from { opacity: 1; margin-left: 0; }
	to   { opacity: 0; margin-left: -150px; }
}

@media screen and (max-width: 1080px) {
	body.home aside {
		margin: 68px auto 0 auto;
		padding: 0;
		border-left: none;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		width: auto;
	}
	body.home aside p
	{
		font-size: 16px;
		width: 190px;
		min-width: 186px;
		height: auto;
		margin: 0;
	}
	#mostValuableBrands
	{
		display: inline-block;
		margin: 0;
		width: 370px;
		max-width: 100%;
		height: 140px;
		vertical-align: top;
		font-size: 0;
	}
	#mostValuableBrandsBefore,
	#mostValuableBrandsAfter { height: 130px; width: 1px; }
	#mostValuableBrandsBefore { margin: 0 2px 0 0; box-shadow: -2px 0 2px #009A9B20; }
	#mostValuableBrandsAfter { margin: 0 0 0 2px; box-shadow: 2px 0 2px #009A9B20; }
	#mostValuableBrands div.brand { display: inline-block; margin: 0 0 0 10px; }
	#mostValuableBrands div.brand:before
	{
		content: '';
		height: 120px;
		width: 1px;
		top: 10px;
		left: -6px;
	}
	#mostValuableBrands div.brand:first-child { margin-left: 0; }
	#mostValuableBrands div.brand:first-child:before { display: none; }
	#mostValuableBrands div.brand a { display: inline-block; }
	#mostValuableBrands div.slideOut { animation: brands_slideout_left 2s ease forwards; }
}

@media screen and (max-width: 480px) {
	body.home aside { display: block; }
	body.home aside p { display: block; margin: 0 auto 8px auto; }
	#mostValuableBrands { display: block; }
	#mostValuableBrandsBefore,
	#mostValuableBrandsAfter { display: none; }
}