.topleft{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #FFF;
	padding: 0 16px 0 0;
	font-weight: bold;
	z-index: 9;

	&::before{
		content: ' ';
		display: inline-block;
		vertical-align: middle;
		margin-right: 16px;
		width: 32px;
		height: 32px;
		line-height: 32px;
		background: $grass;
	}

	.viola &::before{
		background: $viola;
	}

	.yellow &::before{
		background: $yellow;
	}

	.grass &::before{
		background: $grass;
	}

	.aqua &::before{
		background: $aqua;
	}

	.producttile &:before{
		background: $viola;
	}
}

.topright {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	overflow: hidden;
	width: 150px;
	height: 150px;
	text-align: right;

	span {
		font-size: 18px;
		font-weight: bold;
		color: #FFF;
		text-align: center;
		line-height: 30px;
		transform: rotate(45deg);
		width: 200px;
		display: block;
		background: $viola;
		position: absolute;
		top: 42px;
		right: -39px;
		opacity: 0.8;
	}
}

img {
	width: 100%;
	display: block;
}

.ce-sword{
	padding: 2px;
	background: yellow;
}

p.stimmen-circle {
	padding-left:40px;
	position: relative;
	&:before {
		top: -10px;
		font-family: 'iconfont' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		content: "\e90d";
		font-size: 34px;
		position: absolute;
		left: 0;
	}
}

p.trackingInfo {
	font-size: 0.8em;
	line-height: 1.1;
	display: block;
	padding-top: 20px;
	padding-left: 6px;
	&:before{
		display: none !important;
	}
}

.ce-bodytext .servicephone-icon {
	padding-left: 32px;
	position: relative;
	margin-left: 8px;
	&:before {
		font-family: 'iconfont' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		content: "\e918";
		font-size: 200%;
		position: absolute;
		left: -7px;
		top: -10px;
		border: 1px #424242 solid;
		border-radius: 50%;

	}
}

// Spezielles Styling für die Service-Telefon Box
#c680{
	.inner{
		padding: 0;
	}

	> div{
		@include box-sizing('border-box');
		float: none;
		width: 100%;
	}
/*
	.ce-gallery {
		width: 60%;
		margin: 0;
	}
*/

	.ce-textpic{
		display: block;
	}

	.ce-bodytext{
		padding: $content-padding;
	}

	.ce-gallery{
		width: 100%;
		margin: 0;
	}

	.ce-bodytext{
		width: 100%;
	}

	p{
		&:before{
			@extend %pseudoIconElement;
			@extend .icon-service;
			font-size: 250%;
			display: block;
			float: left;
			margin-right: 8px;
			white-space: nowrap;
		}
		//azh 113: remove icons for 2nd and third item
		&:nth-of-type(2):before,
		&:nth-of-type(3):before {
			color:#fff;
		}
	}

	@include breakpoint($mobile-m) {
		.ce-textpic{
			display: flex;
			align-items: center;
			justify-content: left;
		}

		.ce-gallery {
			width: 60%;
			margin: 0;
		}

		.ce-bodytext{
			width: 40%;
		}
	}

	@include breakpoint($mobile-l) {

		.ce-gallery{
			width: auto;
		}

		.ce-bodytext{
			width: auto;
		}
	}

	@include breakpoint($desktop-s) {
		.ce-gallery {
			width: 60%;
		}

		.ce-bodytext{
			width: 40%;
		}
	}

}

span.fa.fa-info {
	margin-left: -17px;
}

.align-center {
	text-align:center;
}

.lazyload, .lazyloading {
	background: linear-gradient(rgb(232, 232, 232) 33%, rgba(232, 232, 232, 0));
	opacity: 0.3;
}

.lazyloaded {
	opacity: 1;
	transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.selectContainer {
	img {
		height: 354px;
	}
}

a.videopopupLink {
	display: none;
	@include breakpoint($mobile-l) {
		display: inline-block;
	}
}
a.videopopupLinkMobile {
	display: inline-block;
	@include breakpoint($mobile-l) {
		display: none;
	}
}
p.testimonial {
	padding: 20px;
	background: rgba(233,236,238, 0.6);
	line-height: 1.6em;
}