/**
 * Fahrzeugsuche-Display styles
 */
html, head, body {
	font-size: 15px;
}

/* Full HD */
@media all and (min-width: 1900px) {
	body {
		font-size: 24px;
	}
}

.tx-fahrzeugsuche-display {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/**
 * Differences between layouts 
 */
.tx-fahrzeugsuche-display.layout-1 #fahrzeugsuche-display-container {
	top: 24%;
	color: #000;
}
.tx-fahrzeugsuche-display.layout-2 #fahrzeugsuche-display-container {
	top: 40%;
	color: #FFF;
}
.tx-fahrzeugsuche-display.layout-2 #fahrzeugsuche-display-container .fahrzeugsuche-display-fahrzeug-images .fahrzeugsuche-display-fahrzeug-image-slider {
	/*margin-top: 24%;*/
}
.tx-fahrzeugsuche-display.layout-2 #fahrzeugsuche-display-container .fahrzeugsuche-display-fahrzeug-info .left,
.tx-fahrzeugsuche-display.layout-2 #fahrzeugsuche-display-container .fahrzeugsuche-display-fahrzeug-info .right {
	margin-top: 15%;
}
.tx-fahrzeugsuche-display.layout-2.aspect-ratio-16-9 #fahrzeugsuche-display-container {
	top: 33%;
}


/**
 * Display fahrzeugsuche loading information
 */
#fahrzeugsuche-loading {
	background-color: rgba(255,255,255,1);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 999;
}
#fahrzeugsuche-loading img {
	margin-top: 20%;
}
#fahrzeugsuche-loading-info {
	margin-top: 40px;
}
#fahrzeugsuche-loading-info > span {
	display: inline-block;
	width: 80%;
	text-align: center;
	margin-bottom: 10px;
	color: #333;
}
#fahrzeugsuche-loading-info > span.error {
	color: #D00;
	font-weight: bold;
}
#fahrzeugsuche-item-duration {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	background-color: #666;
	height: 5px;
}

/**
 * Display fahrzeugsuche container
 */
#fahrzeugsuche-display-container {
	width: 100%;
	height: 42%;
	position: absolute;
	left: 0;
	top: 42%;
}
#fahrzeugsuche-display-container .item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/**
 * Display fahrzeugsuche headline
 */
.fahrzeugsuche-display-fahrzeug-headline {
	margin-left: 5%;
	margin-top: 3%;
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	width: 83%;
}
.fahrzeugsuche-display-fahrzeug-headline h1 {
	font-size: 1.5rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	width: 100%;
}
/* Full HD */
@media all and (min-width: 1900px) {
	.fahrzeugsuche-display-fahrzeug-headline h1 {
		font-size: 2.5rem;
	}
}

/**
 * Display fahrzeugsuche key
 */
.fahrzeugsuche-display-fahrzeug-key {
	margin-right: 2%;
	margin-top: 4%;
	z-index: 99;
	position: absolute;
	top: 0;
	right: 0;
}
.fahrzeugsuche-display-fahrzeug-key h2 {
	font-size: 1.0rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	font-weight: lighter;
	text-align: right;
}
/* Full HD */
@media all and (min-width: 1900px) {
	.fahrzeugsuche-display-fahrzeug-key h2 {
		font-size: 1.5rem;
	}
}

/**
 * Display fahrzeugsuche images
 */
.fahrzeugsuche-display-fahrzeug-images {
	width: 33%;
	height: 100%;
	position: absolute;
	left: 5%;
	top: 33%;
	overflow: hidden;
}
.layout-2 .fahrzeugsuche-display-fahrzeug-images {
	top: 25%;
}
.fahrzeugsuche-display-fahrzeug-images .fahrzeugsuche-display-fahrzeug-image-slider {
	/*margin-top: 30%;*/
	overflow: hidden;
	width: 999999px;
	height: 75%;
}
.fahrzeugsuche-display-fahrzeug-images .fahrzeugsuche-display-fahrzeug-image-slider .fahrzeugsuche-image {
	float: left;
}
.fahrzeugsuche-display-fahrzeug-images .fahrzeugsuche-display-fahrzeug-image-slider .fahrzeugsuche-image img {
	width: 100%;
	height: auto;
}

/**
 * Display fahrzeugsuche information
 */
.fahrzeugsuche-display-fahrzeug-info {
	position: absolute;
	top: 0;
	left: 38%;
	width: 50%;
	height: 100%;
}
.fahrzeugsuche-display-fahrzeug-info ul {
	list-style: none;
	margin: 0 7%;
	padding: 0;
	font-size: 1.0rem;
	line-height: 1.4rem;
	font-weight: lighter;
}
/* Full HD */
@media all and (min-width: 1900px) {
	.fahrzeugsuche-display-fahrzeug-info ul {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}
.fahrzeugsuche-display-fahrzeug-info .left,
.fahrzeugsuche-display-fahrzeug-info .right {
	margin-top: 20%;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
}
.aspect-ratio-16-9.layout-1 .fahrzeugsuche-display-fahrzeug-info .left,
.aspect-ratio-16-9.layout-1 .fahrzeugsuche-display-fahrzeug-info .right {
	margin-top: 17%;
}
.fahrzeugsuche-display-fahrzeug-info .left {
	left: 0;
}
.fahrzeugsuche-display-fahrzeug-info .right {
	left: 50%;
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-display-fahrzeug-price {
	
	
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-display-fahrzeug-price span {
	display: inline-block;
	width: 100%;
	font-size: 1.5rem;
	padding-top: 5%;
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-display-fahrzeug-price span.fahrzeugsuche-display-fahrzeug-price-vatable-notice {
	font-size: 0.7rem;
	padding: 0;
}

/* Full HD */
@media all and (min-width: 1900px) {
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-display-fahrzeug-price {
		margin-top: 3%;
	}
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-display-fahrzeug-price span {
		font-size: 2.5rem;
	}
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-display-fahrzeug-price span.fahrzeugsuche-display-fahrzeug-price-vatable-notice {
		font-size: 1rem;
		padding: 0;
	}
}

/**
 * Display fahrzeugsuche QR-Code
 */
.fahrzeugsuche-display-fahrzeug-qr-code {
	position: absolute;
	right: 0;
	width: 14%;
	cursor: pointer;
}
.aspect-ratio-4-3.layout-1 .fahrzeugsuche-display-fahrzeug-qr-code {
	top: 79%;
}
.aspect-ratio-4-3.layout-2 .fahrzeugsuche-display-fahrzeug-qr-code {
	top: 63%;
}
.aspect-ratio-16-9.layout-1 .fahrzeugsuche-display-fahrzeug-qr-code {
	top: 79%;
}
.aspect-ratio-16-9.layout-2 .fahrzeugsuche-display-fahrzeug-qr-code {
	top: 63%;
}
.fahrzeugsuche-display-fahrzeug-qr-code img {
	width: 100%;
	height: auto;
}

/* Emission fuel consumption */
.fahrzeugsuche-emission-fuel-consumption span {
	display: inline-block;
	width: 100%;
}

/* Energy efficiency sticker */
.tx-fahrzeugsuche .fahrzeugsuche-energy-efficiency-class {
	position: relative;
	width: 150px;
	display: inline-block;
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label {
	display: inline-block;
	text-align: left;
	border-radius: 0.25em 0 0 0.25em;
	position: relative;
	height: 15px;
	line-height: 15px;
	color: #fff;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 13px;
	text-indent: 3px;
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label::after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	border-left-width: 10px;
	border-left-style: solid;
	border-bottom: 8px solid transparent;
	border-top: 7px solid transparent;
	margin-left: -1px;
}
.fahrzeugsuche-display-fahrzeug-info .label-a-plus {
	background-color: #00974c;
	width: 30px;
	margin-right: 120px;
}
.fahrzeugsuche-display-fahrzeug-info .label-a-plus::after {
	left: 30px;
	border-left-color: #00974c;
}
.fahrzeugsuche-display-fahrzeug-info .label-a {
	background-color: #00984c;
	width: 40px;
	margin-right: 110px;
}
.fahrzeugsuche-display-fahrzeug-info .label-a::after {
	left: 40px;
	border-left-color: #00984c;
}
.fahrzeugsuche-display-fahrzeug-info .label-b {
	background-color: #4fad46;
	width: 50px;
	margin-right: 100px;
}
.fahrzeugsuche-display-fahrzeug-info .label-b::after {
	left: 50px;
	border-left-color: #4fad46;
}
.fahrzeugsuche-display-fahrzeug-info .label-c {
	background-color: #c4d22e;
	width: 60px;
	margin-right: 90px;
}
.fahrzeugsuche-display-fahrzeug-info .label-c::after {
	left: 60px;
	border-left-color: #c4d22e;
}
.fahrzeugsuche-display-fahrzeug-info .label-d {
	background-color: #fceb01;
	width: 70px;
	margin-right: 80px;
}
.fahrzeugsuche-display-fahrzeug-info .label-d::after {
	left: 70px;
	border-left-color: #fceb01;
}
.fahrzeugsuche-display-fahrzeug-info .label-e {
	background-color: #f8b812;
	width: 80px;
	margin-right: 70px;
}
.fahrzeugsuche-display-fahrzeug-info .label-e::after {
	left: 80px;
	border-left-color: #f8b812;
}
.fahrzeugsuche-display-fahrzeug-info .label-f {
	background-color: #ea6824;
	width: 90px;
	margin-right: 60px;
}
.fahrzeugsuche-display-fahrzeug-info .label-f::after {
	left: 90px;
	border-left-color: #ea6824;
}
.fahrzeugsuche-display-fahrzeug-info .label-g {
	background-color: #e01e26;
	width: 100px;
	margin-right: 50px;
}
.fahrzeugsuche-display-fahrzeug-info .label-g::after {
	left: 100px;
	border-left-color: #e01e26;
}
/* Energy efficiency sticker: active state */
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span {
	position: relative;
	width: 0;
	height: 0;
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span::before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	right: 20px;
	border-right: 10px solid #000;
	border-bottom: 8px solid transparent;
	border-top: 7px solid transparent;
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span::after {
	color: #fff;
	background-color: #000;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 4px;
	border-radius: 0 0.25em 0.25em 0;
	height: 11px;
	width: 12px;
	line-height: 12px;
	text-align: right;
	font-size: 12px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-a-plus.active + span::after {
	content: "A+";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-a.active + span::after {
	content: "A";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-b.active + span::after {
	content: "B";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-c.active + span::after {
	content: "C";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-d.active + span::after {
	content: "D";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-e.active + span::after {
	content: "E";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-f.active + span::after {
	content: "F";
}
.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label-g.active + span::after {
	content: "G";
}
/* Layout 2: Invert colors */
.layout-2 .fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span::before {
	border-right: 10px solid #FFF;
}
.layout-2 .fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span::after {
	color: #000;
	background-color: #FFF;
}


/* Full HD */
@media all and (min-width: 1900px) {
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class {
		width: 150px;
	}
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label {
		height: 24px;
		line-height: 24px;
		font-size: 18px;
		text-indent: 6px;
	}
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label::after {
		border-left-width: 14px;
		border-bottom: 12px solid transparent;
		border-top: 12px solid transparent;
	}
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span::before {
		border-right: 14px solid #000;
		border-bottom: 12px solid transparent;
		border-top: 12px solid transparent;
		right: 27px;
	}
	.fahrzeugsuche-display-fahrzeug-info .fahrzeugsuche-energy-efficiency-class .label.active + span::after {
		height: 20px;
		line-height: 22px;
		font-size: 16px;
		width: 20px;
	}
}