/*============Variation demo fontend==============*/
.em-variation{
	@include position_style(fixed, left, 0, bottom, 0);
	width:100%;
	z-index: 999;
	background-color:#fff;
	@include box-shadow(0 -2px 10px #A3A3A3) ;	
	.em-variation-btn{
		z-index: 99;
		padding:6px;
		border: 1px solid #000;
		box-shadow: 0 0 10px #999999;
		background-color:#000;
		color:#fff;
		@include hideText();
		@include transition1;
		text-indent:0;
		@include position_style(absolute, left, 0, top, -38px);
		width:37px;
		&:before{
			@include font-awesome(\f0ad,24px);
			@include transition1;
		}
		&:hover{
			background-color:#fff;
			color:#000;
			border-color:#000;
		}
	}
	.reset-button{
		z-index: 99;
		padding:6px;
		border: 1px solid #000;
		box-shadow: 0 0 10px #999999;
		background-color:#000;
		color:#fff;
		@include hideText();
		@include transition1;
		text-indent:0;
		@include position_style(absolute, left, 47px, top, -38px);
		width:41px;
		&:before{
			@include font-awesome(\f12d,24px);
			@include transition1;
		}
		&:hover{
			background-color:#fff;
			color:#000;
			border-color:#000;
		}
	}
	.em-variation-tabstitle{
		background-color:#000;
		width:250px;
		float:left;
		min-height: 225px;
		@include box-shadow(0 0px 12px #585858) ;
		.r-tabs-tab{
			display:block;
			top:0!important;
			.r-tabs-anchor{
				padding:10px 20px;
				margin:0;
				display:block;
				font:700 12px/1.35 Helvetica Neue, Helvetica, Arial, sans-serif;
				color:#666666;
				border-top:1px solid #333333;
				background-color:#000;
				&:hover{
					background-color:#fff;
					border-color:#fff;
					color: #666666;
				}
			}
			&:first-child .r-tabs-anchor{
				border-top:none;
			}
			&.r-tabs-state-active .r-tabs-anchor{
				background-color:#fff;
				border-color:#fff;
				color: #666666;
				
			}
		}
	}
	.em-variation-tabscontent{
		overflow:hidden;
		text-align:center;
		#em-variation-box-wide{
			margin: 0 100px;
			a{
				display:inline-block;
				position:relative;
				max-width:100%;
				&.selected:before{
					display: block;
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background: rgba(0, 0, 0, 0.7);
					z-index:1;
				}
				&.selected:after{
					@include font-awesome(\f00c,50px);
					@include position_style(absolute, right, 0, top, 0);
					color:#fff;
					z-index:2;
					background-color: rgb(176, 208, 82);
				}
			}
		}
		.r-tabs-panel{
			padding:10px 0 0;
			.owl-item a.selected{
				display:inline-block;
				position:relative;
				max-width:100%;
				&:before{
					display: block;
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background: rgba(0, 0, 0, 0.7);
					z-index:1;
				}
				&:after{
					@include font-awesome(\f00c,50px);
					@include position_style(absolute, right, 0, top, 0);
					color:#fff;
					z-index:2;
					background-color: rgb(176, 208, 82);
				}
			}
			.img-responsive{
				display:inline-block;
				margin:0;
				border:1px solid transparent;
				&:hover{
					@include box-shadow(0 0px 5px #585858);
					border-color:#9B9B9B;
				}
			}
			.em-font-family {
				text-align:center;
			}
			p.h5{
				text-transform:uppercase;
			}
			.owl-carousel{
				margin:0 70px;
				.owl-controls{
					position:static;
					.owl-buttons div{
						position:absolute;
						top:33%;
						z-index: 2;
						margin: 0 !important;
						/*padding: 9px 11px !important;
						width:33px;*/
						&.owl-prev{
							left:0;
							right:auto;
							&:before{/*font-size:24px*/}
						}
						&.owl-next{
							left:auto;
							right:0;
							&:before{/*font-size:24px*/}
						}
					}
				}
			}
		}
		.wrapper-input-color{
			margin: 0 30px;
			overflow:hidden;
			.input-lg{
				width: 100%;
				border:1px solid #ccc;
				height: 30px;
				padding: 5px;
				margin-bottom: 5px;
				font-size: 14px;
				color: #000;
			}
		}
	}
	.copyright{
		overflow:hidden;
		text-align:center;
	}
	.em-store-item{
		.em-store-switch{
			position:relative; 
			display:inline-block;
			max-width:100%;
			margin-bottom:10px;
			overflow:hidden;
		}
		span.image-wrap{
			display: block;
			position:absolute;
			left:0;
			top:0;
			height:100%;
			width: 100%;
			background-size: 100%;
			background-position: center 0%;
			padding:1px;
			margin:2px 0 20px;
			-webkit-transition: all 5s ease-out;
			-moz-transition: all 5s ease-out;
			-ms-transition: all 5s ease-out;
			-o-transition: all 5s ease-out;
			transition: all 5s ease-out;
			&.selected,&:hover{
				background-position: center 100%;
				@include box-shadow(0 0px 5px #585858);
				border:1px solid #ebebeb;
				padding:0;
			}
		}
	}
}
.em-variation .em-variation-tabscontent #em-variation-background.r-tabs-panel .owl-carousel .owl-controls .owl-buttons div{
	top: 40%;
}