/* *************
 * loxone_banner
 * ************* */

.loxone_banner {
	position: relative;
}

.loxone_banner .headline,
.loxone_banner .text {
	position: absolute;
	width: 40%;
}

.loxone_banner .headline.light {
	color: #fff;
}

.loxone_banner .headline.dark {
	color: #000;
}

.loxone_banner .headline {
	top: 20px;
	left: 20px;
	font-size: 26px;
	font-family: "averta-extrabold", sans-serif;
	line-height: 1.2em;
}

.loxone_banner .arrow.light g {
	stroke: #fff;
}

.loxone_banner .arrow.dark g {
	stroke: #000;
}

.loxone_banner .text {
	bottom: 25px;
	right: 20px;
	text-align: right;
	font-size: 15px;
	line-height: 1.5em;
	color: #fff;
}

.loxone_banner .button {
	position: absolute;
	bottom: 30px;
	right: 30px;
	letter-spacing: 0;
}

.loxone_banner .overlay {
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 13px;
	left: 5px;
	box-shadow: 0 0 0 5px #69c350;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.loxone_banner .overlay:hover {
	opacity: 1;
}

@media(max-width: 1200px) {
	.loxone_banner {
		margin: 0 auto;
	}

	.loxone_banner .overlay:hover {
		opacity: 0;
	}
}

/* type: small */

.loxone_banner.small {
	max-width: 300px;
}

.loxone_banner.small .headline {
	font-size: 20px;
	line-height: 1.1em;
}

.loxone_banner.small .text {
	display: none;
}

.loxone_banner.small .arrow {
	margin-top: 10px;
}

.loxone_banner.small .button {
	display: none;
}

/* type: medium */

.loxone_banner.medium {
	max-width: 465px;
}

.loxone_banner.medium .button {
	display: none;
}

/* type: large */

.loxone_banner.large .headline {
	font-family: 'averta-extrabold', Arial, sans-serif;
	font-size: 45px;
	top: 20px;
	line-height: 1.1em;
}

.loxone_banner.large .text {
	top: 40px;
	right: 30px;
	font-size: 20px;
}

.loxone_banner.large .arrow {
	display: none;
}

@media(max-width: 980px) {
	.loxone_banner.large {
		display: none;
	}
}