@charset "UTF-8";
/* CSS Document */

.video-wrapper {
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:fixed;
	background-image:url(../common/video-box-background.png);	
	z-index:-2;
	overflow:hidden;
	display:none;
	outline:none;
}

.video-close-bg {
	width:100%;
	height:100%;	
	cursor:pointer;
}

.video-layer {
	width:288px;
	height:162px;
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-144px;
	margin-top:-81px;
	/*padding:12px;*/
	background-color:#000000;
	display:block;	
	z-index:3200;
	outline:none;
}

/* wird eingefügt */
#videoPlayer {
	z-index:3200;	
	outline:none;
}

video {
	outline:none;	
}

.video-close-icon {
	width:26px;
	height:26px;
	top:50%;
	left:50%;
	right:auto;
	margin-left:125px;
	margin-top:-110px;
	display:block;
	position:absolute;
	background-image:url(../common/video-close-icon.png); /* for older browsers */
	background-image:url(../common/video-close-icon.svg), none; 
	background-position:0 0;
	background-size:100%;
	z-index:100;
}	

.video-img {
	width:100%;
	margin-bottom:30px;
	float:left;
	overflow:hidden;
	display:block;
	cursor:pointer;	
	position:relative;
}

.video-img img {
	width:100%;
	height:auto;
	display:block;	
}

.video-more-icon {
	background-image:url(../common/video-start-icon.png);
	background-repeat:no-repeat;
	background-color:transparent;
	position:absolute;
	top:150px;
	left:50%;
	margin:-30px 0 0 -30px;
	width:60px;
	height:60px;
	background-size:100% auto;
	z-index:100;
	cursor:pointer;
	overflow:hidden;
	display:block;
}

.video-more-icon span {
	display:none;	
}

@media screen and ( min-width:340px ) {
	.video-layer {
		width:320px;
		height:180px;
		margin-left:-160px;
		margin-top:-90px;
		/*padding:12px;*/
	}
	
	.video-close-icon {
		margin-left:140px;
		margin-top:-118px;
	}
	
}

@media screen and ( min-width:600px ) {
	.video-layer {
		width:480px;
		height:270px;
		margin-left:-240px;
		margin-top:-135px;
		/*padding:12px;*/
	}
	
	.video-more-icon {
		top:50%;
		left:50%;
		margin:-30px 0 0 -30px;
	}
	
	.video-close-icon {
		width:40px;
		height:40px;
		margin-left:210px;
		margin-top:-176px;
	}
}


@media screen and ( min-width:800px ) {
	.video-layer {
		width:720px;
		height:405px;
		margin-left:-360px;
		margin-top:-202px;
		/*padding:12px;*/
	}
	
	.video-img {
		width:80%;
	}
	
	.video-close-icon {
		top:50%;
		left:50%;
		right:auto;
		margin-left:330px;
		margin-top:-244px;
		display:block;
		position:absolute;
		z-index:2200;
	}
	
	.video-more-icon {
		left:70%;
		margin:-45px 0 0 -45px;
		width:90px;
		height:90px;
	}
	
}

@media screen and ( min-width:1200px ) {
	.video-more-icon {
		left:60%;
	}
}

/* landscape */
@media screen 
  and (max-width: 760px)
   and (max-height: 500px) 
   and (orientation: landscape) {
	   .video-more-icon {
		left:50%;
	}
	   
}