upload/player/CB_video_js/sccs/_interactive-ad.scss
.video-js{
	.cb-vjs-coordinates-child{
		width: 100px;
		background: rgba(255,255,255,0.9);
		color: #000;
		font-size: 12px;
		line-height: 16px;
		padding: 4px;
		border-radius: 2px;
	}
	.cb-vjs-instance-viewer,
	.cb-vjs-instance-manager{
		width: 16px;
		height: 16px;
		background: #00aeef;
		border-radius:8px;
		position: absolute;
		z-index: 1;
		cursor: pointer;
	}
	.cb-vjs-instance-info-front,
	.cb-vjs-instance-info{
		position: absolute;
		width: 614px;
		height: 380px;
		top: 50%;
		left: 50%;
		background:rgba(0,0,0,0.8);
		border-radius: 4px;
		margin: -190px 0 0 -307px;
		z-index: 3;
		padding: 24px;
		font-size: 14px;
		line-height: 20px;
		color: #7a7a7a;
		h2{
			color: #fff;
			font-size: 16px;
			line-height: 18px;
			font-weight: 600;
			margin: 0 0 15px;
		}
		p{
			margin: 0;
		}
		.cb-vjs-instance-info-holder-front,
		.cb-vjs-instance-info-holder{
			padding: 10px 0;
			border-bottom: 1px solid #323232;
			&:last-child{
				border:none;
			}
			&:after{
				display: block;
				content: "";
				clear: both;
			}
		}
		.close-intance-description-front,
		.close-intance-description{
			position: absolute;
			width: 24px;
			height: 24px;
			top: 10px;
			right: 10px;
			cursor: pointer;
			font:12px/16px "Glyphicons Halflings";
			padding:2px 3px;
			color: #fff;
			text-align: center;
			border: 2px solid #fff;
			border-radius: 12px;
		}
	}
	.cb-vjs-interactive-ads-block-front,
	.cb-vjs-interactive-ads-block{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		&:after{
			position: absolute;
			top: 0;
			left: 0;
			content: "";
			width: 100%;
			height: 100%;
			background:rgba(0,0,0,0.7);
			z-index: 1;
		}
	}
	/* interactive ad front style */
	.cb-vjs-instance-front{
		z-index: 2;
	}
	.cb-vjs-instance-info-front{
		margin: -190px 0 0 -307px;
		width: 100%;
		height: 100%;
		max-width: 614px;
		max-height: 380px;
		position: absolute;
		top: 50%;
		left: 50%;
		h2{
			font-size: 22px;
			line-height: 26px;
			margin: 0 0 24px;
		}
		.cb-vjs-instance-info-holder-front{
			padding: 0;
			border:none;
			.media-frame{
				float: left;
				width: 240px;
				height: 150px;
				margin: 0 18px 0 0;
				position: relative;
				img,
				iframe{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
			}
			.txt-box{
				overflow: hidden;
			}
		}
		.close-intance-description-front{
			z-index: 3;
		}
	}
	.cb-vjs-interactive-ads-block-front{
		z-index: 2;
	}
}
@media only screen and (max-width: 991px){
	.video-js{
		/* interactive ad front style */
		.cb-vjs-instance-info-front{
			margin:0 !important;
			max-width: 614px;
			max-height: 614px;
			top: 0;
			left: 0;
			padding: 24px 10px 10px;
			h2{
				font-size: 16px;
				line-height: 18px;
				margin: 0 0 10px;
			}
		}
	}
}
@media only screen and (max-width: 767px){
	.video-js{
		/* interactive ad front style */
		.cb-vjs-instance-info-front{
			.cb-vjs-instance-info-holder-front{
				.media-frame{
					width: 100px;
					height: 62.5px;
					margin: 0 10px 0 0;
				}
			}
		}
	}
}