@mixin alltransition($ease-property, $ease-time, $ease){
	-webkit-transition: $ease-property $ease-time $ease;
	-moz-transition: $ease-property $ease-time $ease;
	-ms-transition: $ease-property $ease-time $ease;
	-o-transition: $ease-property $ease-time $ease;
	transition: $ease-property $ease-time $ease;
}
@mixin myanimation ($name, $duration, $ease) {
	-webkit-animation: $name $duration $ease;
	-moz-animation:    $name $duration $ease;
	-ms-animation:     $name $duration $ease;
	-o-animation: $name $duration $ease;
	animation: $name $duration $ease;
}
.video-js{
	#cb-vjs-comments{
		overflow: hidden;
		position: absolute;
		left:0;
		bottom: 0;
		padding: 0 20px;
		width: 100%;
		height: 282px;
		z-index: 1;
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
			position: absolute;
			bottom: 0;
		}
		.cb-vjs-comments-list{
			overflow: hidden;
			height: 74px;
			margin: 0 0 20px;
			@include alltransition($ease-property: all, $ease-time: 0.3s, $ease: linear);
			&.active{
				@include myanimation ($name: lefttoright, $duration: 0.3s, $ease: ease-in);
				~ .cb-vjs-comments-list{
					position: absolute;
					left:-1000px;
				}
			}
		}
		.cb-vjs-comments-avatar{
			width: 74px;
			height: 74px;
			border-radius: 37px;
			float: left;
			margin: 0 20px 0 0;

		}
		.cb-vjs-comment-box{
			float: left;
			color: #c2c2c2;
			font-size: 16px;
			line-height:18px;
			font-weight: 600;
			padding: 2px 0;
			.comment{
				font-size: 18px;
				line-height: 20px;
				color: #000;
				padding: 10px;
				border-radius: 2px;
				background: #fff;
				overflow: hidden;
				height: 40px;
			}
		}
		.cb-vjs-comment-username{
			display: block;
			margin: 0 0 12px;
		}
	}
}
@mixin translate ($x, $y:0) {
	-webkit-transform:       translate($x, $y);
	-moz-transform: 	 translate($x, $y);
	-ms-transform: 		 translate($x, $y);
	-o-transform: 		 translate($x, $y);
}
@mixin lefttoright(){
	0%{
		opacity: 0;
		@include translate ($x:-100%, $y:0);
	}
	100%{
		opacity: 1;
		@include translate ($x:0, $y:0);
	}
}
@-webkit-keyframes lefttoright {
	@include lefttoright();
}

@-moz-keyframes lefttoright {
	@include lefttoright();
}
@-o-keyframes lefttoright {
	@include lefttoright();
}
@keyframes lefttoright {
	@include lefttoright();
}