/*===============================================
	[SASS DIRECTORY ]
	
    [1] Minxin Link
    [2] Minxin Button
    [3] Minxin Triangle
    [4] Minxin LABEL PRODUCT
    [5] Minxin Scrollbars
    [6] Minxin Dev Custom
  
==============================================*/

@import 'bourbon/bourbon';


.no-margin{margin: 0 !important;}

//===== Minxin Link =======

@mixin link(){
	color: $linkColor;text-decoration: none;
	&:hover{color: lighten($linkColor, 10%);}
}
@mixin linkGrayDark(){
	color: $gray-dark;
	&:hover{color: $linkColor;}
}

@mixin linkGray(){
	color: $gray;
	&:hover{color: $linkColor;}
}
@mixin linkGraylighter(){
	color: $input-color-placeholder ;
	&:hover{color: $linkColor;}
}
@mixin linkGrayLight(){
	color: $base-border-color;
	&:hover{color: $linkColor;}
}
@mixin linkWhite(){
	color: $white;
	&:hover{color: $linkColor;}
}
@mixin linkTitle(){
	color: $textColor2; // color #222;
	&:hover{color: $linkColor;}
}
//====== Minxin Buton =======
@mixin buttonGrayDark(){
	padding: 9px 20px; background: $gray-darker;color: #fff;   border-radius: 3px;border: none;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
}

@mixin buttonGray(){
	padding: 9px 20px; background: $gray;color: #fff;  border-radius: 3px;border: none;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
}

@mixin buttonGraylighter(){
	padding: 9px 20px;background: $gray-lighter;color: #333;  border-radius: 3px;border: none;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
	
}
@mixin buttonGraylight(){
	@include buttonGray(); 
	background: $input-color-placeholder; 
	&:hover{background: $background;}
}

@mixin buttonColor(){
	@include buttonGray();
	background: $background; border-color: $background;
	&:hover{background: $gray;border-color: $gray;}
}
@mixin bgbutton(){
	background: -moz-linear-gradient(top, #474747 0%, #212121 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#212121));
    background: -webkit-linear-gradient(top, #474747 0%,#212121 100%);
    background: -o-linear-gradient(top, #474747 0%,#212121 100%);
    background: -ms-linear-gradient(top, #474747 0%,#212121 100%);
    background: linear-gradient(to bottom, #474747 0%,#212121 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#212121',GradientType=0 );
}
@mixin buttonColorLighten($opacity){
	@include buttonGray();
	background: $background; border: none;
	&:hover{background: lighten($background, $opacity);}
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}


//======   @include scrollbars(.5em, slategray);
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  30%)) {
  // For Google Chrome
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;
  }

  ::-webkit-scrollbar-thumb {
      background: $foreground-color;
  }

  ::-webkit-scrollbar-track {
      background: $background-color;
  }

  // For Internet Explorer
  body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

@mixin imageFade($opacity:0.8){
	img{transition: 0.3s all ease-in-out ;}
    .img-responsive:hover{opacity: $opacity;}
}

//====== Minxin Triangle  =======
// Size helper mixin
// ---
// @param [number] $width: width
// @param [number] $height ($width): height
// ---

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// [Private] 
// Position helper mixin
// Article about it: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
// ---
// @param [string] $position: position type
// @param [list] $args: list of offsets and values
// ---
@mixin _position($position, $args) {
  @each $o in top right bottom left {
    $i: index($args, $o);
    @if $i{
		@if $i + 1 <= length($args){
			@if type-of( nth($args, $i + 1) )== number {
				#{$o}: nth($args, $i + 1);
			}
			
		 }
      
    }
  }
  position: $position;
}

// Absolute positioning helper mixin
// Article about it: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
// ---
// @param [list] $args: list of offsets and values
// ---
@mixin absolute($args) {
  @include _position(absolute, $args);
}

@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
  // Make sure the direction is valid
  @if not index(top right bottom left, $direction) {
    @warn "Direction must be one of top, right, bottom or left.";
  }

  @else {
    @include absolute($position); // Position
    @include size(0); // Size
    content: '';
    z-index: 2;

    border-#{$direction}: $size * 1 solid $color;
    $perpendicular-borders: $size solid transparent;
    
    @if $direction == top or $direction == bottom {
      border-left:   $perpendicular-borders;
      border-right:  $perpendicular-borders;
    }

    @else if $direction == right or $direction == left {
      border-bottom: $perpendicular-borders;
      border-top:    $perpendicular-borders;
    }
  }
}


// @include ellipsis(2em, 2);
@mixin ellipsis ($max-height, $lines: 2) {
  // Fallback for non-webkit browsers.
  // Fallback does not render ellipsis.
  overflow: hidden;
  max-height: $max-height;
	
  // Webkit solution for multiline ellipsis
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;  
  
  // Solution for Opera
  text-overflow: -o-ellipsis-lastline;
}

/*Dev Custom */
@mixin opacity($var){
   -webkit-opacity: $var;
   -moz-opacity: $var;
  -ms-opacity:$var;
   -o-opacity: $var;
  opacity:$var;
}

@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

@mixin border-top-radius($radius) {
  border-top-right-radius: $radius;
   border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
}

@mixin box-shadow($shadow) {
  -moz-box-shadow: $shadow; 
  -webkit-box-shadow: $shadow; 
          box-shadow: $shadow;
}
@mixin transition($transition) {
  transition: $transition;
  -moz-transition: $transition;
  -webkit-transition: $transition;
}

@mixin effect-block-show() {
  visibility: visible;
  @include opacity(1);
  @include transition(all 0.2s ease-in-out 0s);
  
}
@mixin effect-block-hide() {
  visibility: hidden;
  @include opacity(0);
  @include transition(all 0.2s ease-in-out 0s);  
}
// owl2-nav style - etrostore
@mixin owl2-nav-style($size,$fontsize,$bgcolor){	
        .owl2-prev,
        .owl2-next{       
            background-color: $bgcolor;
            border: none;
            @include border-radius(0px);
            width: $size;
			height: $size;
			line-height: $size;
			text-align: center;
			float: $left;
			text-indent: -9999px;
			overflow: hidden;
			cursor: pointer;
            opacity: 1;
            position: absolute;
            top: 50%;
            z-index: 99;
			&:before{
				color: #fff;
				font-family: $FontAwesome;
				display: block;
				text-indent: 0 !important;
				width: 100%;
				height: 100%;
				font-size: $fontsize;
			}
			&.owl2-next{		
				#{$right}: 0;		
				&:before{
				  @include if-ltr{             
				  	content: "\f054"; 
				  }  
				  @include if-rtl {
				    content: "\f053"; 
				  }  
				}
			}
			&.owl2-prev{	
				#{$left}: 0;			
				&:before{
				  @include if-ltr{             
				  	content: "\f053"; 
				  }  
				  @include if-rtl {
				    content: "\f054"; 
				  }  
				}
			}
			&:hover{
				//border-color: $linkColor;
				background-color: $background;
				&:before{
				  color: #fff;
				}
			} 
        }
}

// owl2-dots style - Best shop
@mixin owl2-dot-style($width,$height,$bg){
	text-align: center;
	.owl2-dot{
		width: $width;
		height: $height;
		border-radius: $height;
		background-color: $bg;
		margin: 0 5px;
		display: inline-block;
		float: none;
		opacity: 1;
		@include transition(all 0.2s ease-in-out 0s);  
		span{
			display: none;
		}
		&:hover{
			background-color: $background;
		}
		&.active{
			//span{
				//width: $width + 22px;
				background-color: $background;
			//}
		}
	}
}

// owl2-nav layout 2 - T
@mixin owl2-nav-style3(){	
	 .owl2-controls{
	    position: absolute;
	    top: 0px;
	    #{$right}: 0px;
	    .owl2-next,
	    .owl2-prev{
	        color: #666666;
	        font-size: 14px;
	        position: relative;
	        padding-#{$left}: 10px;
	        margin-#{$left}: 10px;
	        @include opacity(1);
	        &:hover{
	        	background: transparent;
	        	color: $linkColor;
	        }
	    }
	    .owl2-next{
	        &:before{
	            content: "";
	            position: absolute;
	            top: 5px;
	            #{$left}: 0;
	            height: 10px;
	            width: 1px;
	            background: #ccc;
	        }
	    }
	}
}

// owl2-nav layout 1 - Bestshop
@mixin owl2-nav-style1($size,$fontsize : 14px,$color1,$color2){	
	 position: static;
        .owl2-prev,
        .owl2-next{       
            background-color: #fff;
            border: 2px solid $color1;
            @include border-radius(50%);
            width: $size;
			height: $size;
			line-height: $size - 6px;
			text-align: center;
			float: $left;
			text-indent: -9999px;
			overflow: hidden;
			cursor: pointer;
            opacity: 1;
            z-index: 99;
            font-size: $fontsize;
            position: absolute;
            top: 50%;
            margin-top: -($size/2);
			&:before{
				color: $color1;
				font-family: $FontAwesome;
				display: block;
				text-indent: 0 !important;
				width: 100%;
				height: 100%;
				font-size: $fontsize;
			}
			&.owl2-next{	
				#{$right}: -22px;
				#{$left}: auto;
				&:before{
					@include if-ltr{             
			      	content: "\f105"; 
			      }  
			      @include if-rtl {
			        content: "\f104"; 
			      }  
			    }
			}
			&.owl2-prev{	
				#{$left}: -22px;
				#{$right}: auto;
				&:before{			
					@include if-ltr{             
				      	content: "\f104"; 
				    }  
				    @include if-rtl {
				        content: "\f105"; 
				    }  
				}
			}
			&:hover{
				border-color: $color2;
				background-color: $color2;
				&:before{
				  color: #fff;
				}
			} 
        }
}

// owl2-nav layout 2 - emarket
@mixin owl2-nav-style2($size,$fontsize,$color){
	position: absolute;
	top: 0;
	#{$right}: 0;
	z-index: 99;
	.owl2-prev,
    .owl2-next{       
        background-color: #fff;
        border: 1px solid $color;
        @include border-radius(50%);
        width: $size;
		height: $size;
		line-height: $size - 2px;
		text-align: center;
		float: $left;
		text-indent: -9999px;
		overflow: hidden;
		cursor: pointer;
        opacity: 1;
        z-index: 99;
        font-size: $fontsize;
        position: static;
        margin: 0;
        font-weight: 400;
		&:before{
			color: $color;
			font-family: $FontAwesome;
			display: block;
			text-indent: 0 !important;
			width: 100%;
			height: 100%;
			font-size: $fontsize;
		}
		&.owl2-next{	

			&:before{
				@include if-ltr{             
		      	content: "\f105"; 
		      }  
		      @include if-rtl {
		        content: "\f104"; 
		      }  
		    }
		}
		&.owl2-prev{	
			margin-#{$right}: 4px;
			&:before{			
				@include if-ltr{             
			      	content: "\f104"; 
			    }  
			    @include if-rtl {
			        content: "\f105"; 
			    }  
			}
		}
		&:hover{
			border-color: $background;
			background-color: $background;
			&:before{
			  color: #fff;
			}
		} 
    }
	  
}

// hover image 
@mixin hover-image-effect(){	
	//a{
		display: block;
        position: relative;
        
        &:before{
           background-color: rgba(0,0,0,0.3);	
            content: "";
            height: 100%;
            width: 100%;
            #{$left}: 0;
            top: 0;
            position: absolute;
            @include effect-block-hide();
            z-index: 1;
        }
        
      //}
      &:hover{
    		&:before{
        		@include effect-block-show();
        	}            	
      }
}

// style owl arrow block sidebar
@mixin button-owl-style2($fontsize,$color){	      
      .owl2-prev,
      .owl2-next{
      	@include opacity(1);
        background-color: transparent;
        float: $left;
        margin-#{$left}: 15px;
        margin-#{$right}: 0 !important;
        &:before{
          font-family: $FontAwesome;
          font-size: $fontsize;
          color: $color;
        }
        &:hover{
          background-color: transparent;
          &:before{
            color: $linkColor;
          }    
        }
        i{
        	display: none;
        }
      }
      .owl2-prev{
        margin-right: 15px; 
        &:before{
		  @include if-ltr{             
		  	content: "\f053"; 
		  }  
		  @include if-rtl {
		    content: "\f054"; 
		  }  
		}     
      }
      .owl2-next{
        &:before{
		  @include if-ltr{             
		  	content: "\f054"; 
		  }  
		  @include if-rtl {
		    content: "\f053"; 
		  }  
		}        
      }     
    
}





/*====================================================*/
@mixin button-group(){font-size: 0;
	.wishlist,.compare{
		opacity: 0;z-index: 1;font-size: 12px;margin: 0 4px;
		@include transition(all 0.1s ease-in-out 0s);
	}
	.wishlist{
		@include transform(translateX(40px));
	}
	.compare{
		@include transform(translateX(-40px));
		
	}
}
@mixin button-group-hover(){
	.wishlist,.compare{
		@include transform(translateX(0px));
		opacity: 1;
		@include transition(all 0.3s ease-in-out 0s);
	}
	
	.addToCart{background: $background1; color: #fff; border-color: $linkColor;}
}
@mixin title-underline($size){
    h3.modtitle{font-size: 16px; border-bottom: $size solid #e6e6e6;margin: 0 0 30px;padding: 9px 0; text-transform: uppercase; font-weight: bold; position: relative;
        &:after{content:" "; width: 125px; height: $size; background: $background1; display: block; position: absolute; bottom: 0;margin-bottom: -$size; }  
    }
    
}
@mixin owl2-controls(){
	position: absolute;
	top: 0;
	#{$right}: 0;
	width: 100%;
	z-index: 45;
	.owl2-nav {
		div.owl2-prev{
			content: "\f104";
			top: 7px;
			@include if-ltr {#{$left}: auto; #{$right}: 37px;}
			@include if-rtl {#{$left}: auto; #{$right}: 7px;}
		}
		div.owl2-next{
			content: "\f105";
			top: 7px;
			@include if-ltr {#{$left}: auto; #{$right}: 7px;}
			@include if-rtl {#{$left}: auto; #{$right}: 37px;}
		}
		div.owl2-prev, div.owl2-next{
			height: 25px;
			width: 25px;
			font-family: $FontAwesome;
			border-radius: 25px;
			background: #fff;
			opacity: 1;
			border: 1px solid #a0a0a0;
			color: #a0a0a0;
			font-size: 0;
			margin: 0;
			padding: 0;
			text-align: center;
			&:before{
				font-size: 17px;
				line-height: 22px;
				text-align: center;
				
			}
			&:hover{
				border-color: $linkColor;
				color: $linkColor;
			}
		}
	}
}



.lib-list-item-product2{
		border: none;
		.image-dev{
			
			.list-button-dev{
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 10;
				transform: translate3d(-50%,-50%,0);
				-moz-transform: translate3d(-50%,-50%,0);
				-webkit-transform: translate3d(-50%,-50%,0);
				-ms-transform: translate3d(-50%,-50%,0);
				li{
					display: inline-block;
					float: left;
					height: 40px;
					width: 40px;
					background: #fff;
					position: relative;
					border-width: 0 1px 0 0;
					border-style: solid;
					border-color: #ddd;
					opacity: 0;
					transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
					&:nth-child(1){
						transform: translateX(40px);
						-moz-transform: translateX(40px);
						-webkit-transform: translateX(40px);
						-ms-transform: translateX(40px);
						z-index: 1;
						transition-delay: 0s;
					}
					&:nth-child(2){
						transition-delay: 0.2s;
						z-index: 2;
					}
					&:nth-child(3){
						transition-delay: 0.2s;
						z-index: 2;
					}
					&:nth-child(4){
						transform: translateX(-40px);
						-moz-transform: translateX(-40px);
						-webkit-transform: translateX(-40px);
						-ms-transform: translateX(-40px);
						z-index: 1;
						transition-delay: 0s;
					}
					&:first-child{border-left: 1px solid #ddd;}
					
					a, button{
						background: none;
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						line-height: 40px;
						text-align: center;
						box-shadow: none;
						border: none;
						color: $gray;
						width: 40px;
						padding: 0;
					}
					&:hover{
						
						background: $background1;
						a, button{
							color: #fff;
						}
					}
				}
			}
		}
		.caption-dev{
			text-align: center;
			padding: 0 15px;
			.rating-dev{
				margin: 5px 0;
				.fa-stack-2x{
					font-size: 11px;
				}
			}
			.title-dev{
				color: #444;
				font-size: 13px;
				
			}
			.price-dev{
				.price.product-price{font-size: 16px;}
				.price-new{font-size: 16px;}
				.price-old{font-size: 12px}
			}
			.add-cart-dev{
				background: #fff;
				border: 1px solid #ddd;
				font-size: 12px;
				text-transform: uppercase;
				color: #999;
				font-weight: bold;
				box-shadow: none;
				border-radius: 0;
				padding: 6px 20px;
				margin: 0 0 30px;
				@include transition(all 0.2s ease-in-out);

			}
		}
}

.lib-list-item-product-over2{
	
	.image-dev{
		
		.list-button-dev{
			li{
				
				opacity: 1;
				transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
				&:nth-child(1){
					transform: translateX(0);
					-moz-transform: translateX(0);
					-webkit-transform: translateX(0);
					-ms-transform: translateX(0);
					transition-delay: 0.2s;
				}
				&:nth-child(2){
					transition-delay: 0s;
				}
				&:nth-child(3){
					transition-delay: 0s;
				}
				&:nth-child(4){
					transform: translateX(0);
					-moz-transform: translateX(0);
					-webkit-transform: translateX(0);
					-ms-transform: translateX(0);
					transition-delay: 0.2s;
				}
			}
		}
	}
	
} 

/*EFECT PRODUCT NUMBER*/
.lib-two-img{
	position: relative;
	display: block;
	.img-1{
	opacity: 1;
		position: relative;
        //@include transform(rotateY(0deg));
		transition: all 0.5s ease-in-out;
	}
	.img-2{
		position: absolute;
		z-index: 0;
		top: 0;
		opacity: 0;
		//width: 100%;
		display: block;
        //@include transform(rotateY(90deg));
		transition: all 0.5s ease-in-out;
		#{$left}: 50%;
		transform: translateX(-50%);
		@include if-rtl {
            transform: translateX(50%);
        }
	}
}

.lib-two-img-over{
	.img-1{
		opacity: 0;
        transform-style: inherit;
        //@include transform(rotateY(90deg));
		transition: all 0.5s ease-in-out;
	}
	.img-2{
		opacity: 1;
        transform-style: inherit;
		//@include transform(rotateY(0deg));
		transition: all 0.5s ease-in-out;
	}
}

/*EFFECT SLIDERHOME*/

@keyframes myeffect-slideshow {
    0%   {
	opacity: 0;
	transform: translateY(-300px);
	-webkit-transform: translateY(-300px);
	-moz-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	-o-transform: translateY(-300px);
    }
    100% {
	opacity: 1;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    }
    
    
}
@-webkit-keyframes myeffect-slideshow {
    0%   {
	opacity: 0;
	transform: translateY(-300px);
	-webkit-transform: translateY(-300px);
	-moz-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	-o-transform: translateY(-300px);
    }
    100% {
	opacity: 1;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    }
}
    
    
@-moz-keyframes myeffect-slideshow {
    0%   {
	opacity: 0;
	transform: translateY(-300px);
	-webkit-transform: translateY(-300px);
	-moz-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	-o-transform: translateY(-300px);
    }
    100% {
	opacity: 1;
	transform: translateY(0);
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    }
}