/*===============================================
	[SASS DIRECTORY ]
	
    [1] Minxin Link
    [2] Minxin Buton
    [3] Minxin Triangle
   
    ==============================================*/

    @import 'bourbon/bourbon';

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

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

@mixin linkGray(){
	color: #444 ;
	&:hover{color: $linkColor;}
}
@mixin linkGraylighter(){
	color: #999 ;
	&:hover{color: $linkColor;}
}

@mixin linkColor($color1,$color2){
	color: $color1;text-decoration: none;
	&:hover{color: $color2;}
}

//====== Minxin Buton =======
@mixin buttonGray(){
	padding: 7px 12px; background: $gray;color: #fff;   border-radius: 0; border-color: $gray;
	&:hover{background: $background1; border-color: $linkColor;color: #fff; }
}

@mixin buttonColor(){
	@include buttonGray();
	background: $background; border-color: $background;
	&:hover{background: $gray;border-color: $gray;}
}


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


//====== 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;
    }
}
}

//====== Minxin Buton Social =======
@mixin icons-social($name,$color,$textColor,$type){
	
	@if($type != circled ){
		&.fa-#{$name}{color:$color}
		}@else{
			.icon-circled {
				display: inline-block;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				line-height: 40px;
				border: 1px solid $background;
				color:$background;
				vertical-align: top;
				text-align: center;
			}
			.icon-color.fa-#{$name}{
				background:$color;border-color: $color; color: $textColor;
			}
		}

		a:hover{

			@if($type != circled ){
				&.fa-#{$name}{color:$color}
				}@else{
					.icon-circled{background:$background;color:$textColor;}
					.icon-color.fa-#{$name}{
						background:lighten($color,10%);
					}
				}

			}
		}

//====== Minxin Buton Social =======
.marginbottom__3x{margin-bottom: 30px;}

//====== Minxin owl controls =======
@mixin owl-controls($background,$type){
	.owl2-nav .owl2-prev,
	.owl2-nav .owl2-next{
		width: 20px;height: 27px; border: 1px solid #ddd;background-image: url('#{$base-url-theme}icons/ico-slider.png'); background-repeat: no-repeat;
		background-color: #fff; display: inline-block; text-indent: -999em; position: absolute;  transition: all 0.2s ease-in-out 0s; top:calc(50% - 13px);
		&:hover{background-color: $background; background-position: 0px 0; border-color: $linkColor;}
	}
	.owl2-nav .owl2-prev{
		background-position: -31px 0;
		&:hover{background-position: 0px 0;}
	}		
	.owl2-nav .owl2-next{
		background-position: -60px 0;
		&:hover{ background-position: -90px 0;}
	}

	@if($type == default ){
		.owl2-nav .owl2-prev{
			@include if-ltr {#{left}: 0px;}
			@include if-rtl { #{left}: 0px;}
		}		
		.owl2-nav .owl2-next{
			@include if-ltr {#{right}: 0px;}
			@include if-rtl { #{right}: 0px;}
		}
		
		}@else if($type == listing_tabs ){
			.owl2-nav .owl2-prev{
				@include if-ltr {#{$right}: 25px; #{$left}: auto;}
				@include if-rtl { #{$right}: 0px;#{$left}: auto;}
			}		
			.owl2-nav .owl2-next{
				@include if-ltr {#{$right}: 0px;}
				@include if-rtl { #{$right}: 25px;}
			}


		}

	}

//============== border header top======
@mixin border-top {
	position: relative;
	&:after{
		content: "";
		height: 13px;
		width: 1px;
		background: #cccccc;
		position: absolute;
		#{$right}: 0;
		top: 50%;
		margin-top: -6px;
	}
}


//====== Minxin header-main =======
@mixin header-main {
	padding: 0;
	.home{
		i{
			padding: 0 10px;
		}
	}
	li{
		display: inline-block;
		list-style: none;
		font-size: 14px;
		a{
			color: $color-button;
			&:hover{
				color: $linkColor;
			}
		}

	}
}

//DAY IMAGE BLOG
@mixin day ($pxtop, $pxleft){
	position: absolute;
	background: #fff;
	top: $pxtop;
	#{$left}: $pxleft;
	display: block;
	z-index: 999;
	width: 50px;
	height: 65px;
	text-align: center;
	border-radius: 3px;
	p{
		color: $linkColor;
		&:first-child{
			font-weight: 700;
			font-size: 2em;
			margin-top: 15px;
			margin-bottom: 3px;
		}
	}
}
@mixin article_image {
	padding: 8px;
	border: 1px solid #e5e5e5;
	position: relative;
}

//ICON SHARE
@mixin share-icon-li {
	list-style: none;
	display: inline-block;
	background: #1d9ffa;
	text-align: center;
	border-radius: 3px;
	margin-#{$left}: 5px;
	a{
		display: block;
		height: 27px;
		width: 27px;
		line-height: 27px;
		i{
			color: #fff;
		}
	}

}
@mixin  share-icon-facebook{
	background:  #1d9ffa;
	&:hover{
		background: #b9def9;
	}
}
@mixin share-icon-twitter {
	background: #456bbe;
	&:hover{
		background: #8e9dbd;
	}
}
@mixin share-icon-google {
	background: #e04d3f;
	&:hover{
		background: #e2aba6;
	}
}
@mixin share-icon-skype {
	background: #4899d2;
	&:hover{
		background: #abc4d6;
	}
}
@mixin share-icon {
	ul{
		li{
			@include share-icon-li;
		}
		.twitter{
			@include share-icon-twitter;
		}
		.facebook{
			@include share-icon-facebook;
		}
		.google{
			@include share-icon-google;
		}
		.skype{
			@include share-icon-skype;
		}
	}
}

//PRODUCT LAYOUT - GRIL
@mixin span-new {
	position: absolute;
	width: 45px;
	height: 45px;
	border-radius: 100px;
	color: #fff;
	line-height: 45px;
	text-align: center;
}
@mixin classhover {
	position: absolute;
	bottom: 0;
	#{$right}: 5px;
	ul {
		padding: 0;
		li{
			list-style: none;
			display: block;
			width: 40px;
			height: 40px;
			background: #fff;
			line-height: 40px;
			text-align: center;
			border-radius: 3px;
			margin: 5px;
			transition-timing-function: ease;
			opacity: 0;
			a{
				font-size: 1.5em;
				transition: none;
				width: 40px;
				height: 40px;
				display: block;
			}
			&:hover{
				background: $linkColor;
				a{
					color: #fff;
				}
			}
		}
	}

	.icon-heart{
		transition: opacity 2s;
	}
	.icon-exchange{
		transition: opacity 1s;
	}
	.icon-search{
		transition: opacity 0s;
	}
}
@mixin classhover-home-4 {
	position: absolute;
	bottom: 0;
	#{$right}: 0;
	width: 100%;
	ul {
		padding: 0;
		li{
			list-style: none;
			display: inline-block;
			width: 25%;
			float: left;
			height: 0;
			transition: all .5s;
			background: rgba(0 , 0, 0, .3);
			line-height: 40px;
			text-align: center;
			transition-timing-function: ease;
			opacity: 0;
			a{
				font-size: 1.5em;
				transition: none;
				height: 40px;
				display: block;
				text-align: center;
				width: 100%;
				color: #fff;
			}
			&:hover{
				a{
					color: $linkColor;
				}
			}
		}
	}	
}
@mixin classhover-home-6 {
	width: 100%;
	position: absolute;
	bottom: 0;
	#{$right}: 0;
	ul {
		padding: 0;
		text-align: center;
		display: block;
		overflow: hidden;
		li{
			list-style: none;
			display: inline-block;
			width: 40px;
			height: 40px;
			background: #fff;
			line-height: 40px;
			text-align: center;
			transition-timing-function: ease;
			opacity: 0;
			border-radius: 50%;
			float: none;
			margin: 5px;
			a{
				font-size: 1.5em;
				transition: none;
				height: 40px;
				display: block;
				text-align: center;
				width: 100%;
				color: #222222;
				border-radius: 50%;
			}
			&:hover{
				a{
					background: $linkColor;
					color: #fff;
				}
			}
		}
		.icon-cart{
			transition: opacity 0;
		}
		.icon-heart{
			transition: opacity 0.5s;
		}
		.icon-exchange{
			transition: opacity 1s;
		}
		.icon-search{
			transition: opacity 1.5s;
		}
	}	
}
@mixin product-layout($linkColor:$linkColor, $border-radius: 5px) {
	padding-bottom: 1px;
	&:hover{
		.product-img{
			background: rgba(0,0,0,.3);
			display: block;
			overflow: hidden;
		}
		.hover{
			ul li{
				opacity:  1!important;
			}
		}
		.hover-1{
			ul li{
				opacity:  1!important;
				height: 40px!important;
			}
		}
		.right-block{
			button{
				background: $linkColor;
				border-color: $linkColor;
				span{
					color: #fff!important;
				}
			}
			.caption{
				h4 a{
					color: $linkColor;
				}
			}
		}
	}
	.product-item-container{
		border: none;
		.left-block{
			position: relative;
			border: 1px solid #e5e5e5;
			border-radius: $border-radius;
			padding: 5px;
			.product-image-container .product-img{
				display: block;
				overflow: hidden;
				img{
					width: 100%;
				}
				&:before{
					background-color: inherit;
					position: absolute;
					top: 0;
					bottom: 0;
					#{$left}: 0;
					#{$right}: 0;
					content: "";
					width: 100%;
					height: 100%;
					transition: all 0.5s;
				}
			}
			
			.new{
				@include span-new;
				top: 10px;
				#{$left}: 10px;
				background: #0083c1;
				text-transform: uppercase;
			}
			.sale{
				@include span-new;
				background: #ff5555;
				top: 10px;
				#{$right}: 10px;
			}
			.hover{
				@include classhover;
			}
			.hover-1{
				@include classhover-home-4;
			}
		}

		.right-block{
			padding-top: 5px;
			h4{
				margin-bottom: 10px;
				margin-top: 10px;
				a{
					font-size: 14px;
					color: #444444;
					&:hover{
						color: $linkColor;
					}
				}
			} 

			.ratings{
				line-height: 30px;
				span i{
					color: #222222;
				}
				.gray i{
					color: #cccccc;
				}
			}
			.price{
				margin: 10px 0 15px;
				span{
					font-size: 18px;
					color: #ff5555;
					font-weight: 500;
				}
				.price-old{
					font-size: 14px;
					text-decoration: line-through; 
					color: #777777;
				}
			}
			.button-group{
				button{
					border-radius: $border-radius;
					text-transform: uppercase;
					width: 120px;
					height: 40px;
					&:hover span{
						color: #fff;
					}
					span{
						color: #777777;
						font-size: 12px;

					}
					&:active:focus, &:active, &:focus{
						background: $linkColor;
						outline: none;
						span{
							color: #fff;
						}
					}
				}
			}
		}
	}
}

@mixin product-layout-home-4($linkColor:$linkColor, $border-radius: 5px) {
	padding-top: 20px;
	padding-bottom: 1px;
	&:hover{
		.product-img{
			background: rgba(0,0,0,.3);
			display: block;
			overflow: hidden;
		}
		.hover{
			ul li{
				opacity:  1!important;
			}
		}
		.hover-1{
			ul li{
				opacity:  1!important;
				height: 40px!important;
			}
		}
		.right-block{
			button{
				background: #333333;
				border-color: #333333;
				span{
					color: #fff!important;
				}
			}
			.caption{
				h4 a{
					color: $linkColor;
				}
			}
		}
	}
	.product-item-container{
		border: none;
		.left-block{
			position: relative;
			border: 1px solid #e5e5e5;
			border-radius: $border-radius;
			padding: 0;
			.product-image-container .product-img{
				display: block;
				overflow: hidden;
				img{
					width: 100%;
				}
				&:before{
					background-color: inherit;
					position: absolute;
					top: 0;
					bottom: 0;
					#{$left}: 0;
					#{$right}: 0;
					content: "";
					width: 100%;
					height: 100%;
					transition: all 0.5s;
				}
			}
			
			.new{
				@include span-new;
				top: 10px;
				#{$left}: 10px;
				background: #333333;
				text-transform: uppercase;
			}
			.sale{
				@include span-new;
				background: #ff5555;
				top: 10px;
				#{$right}: 10px;
			}
			.hover{
				@include classhover;
			}
			.hover-1{
				@include classhover-home-4;
			}
		}

		.right-block{
			padding-top: 5px;
			h4{
				margin-bottom: 10px;
				margin-top: 10px;
				a{
					font-size: 14px;
					color: #444444;
					&:hover{
						color: $linkColor;
					}
				}
			} 

			.ratings{
				line-height: 30px;
				span i{
					color: #222222;
				}
				.gray i{
					color: #cccccc;
				}
			}
			.price{
				margin: 10px 0 15px;
				span{
					font-size: 18px;
					color: #ff5555;
					font-weight: 500;
				}
				.price-old{
					font-size: 14px;
					text-decoration: line-through; 
					color: #777777;
				}
			}
			.button-group{
				button{
					border-radius: 0;
					&:hover{
						background: #333333;
						border-color: #333333;
					}
					&:active:focus{
						background: #333333;
						border-color: #333333;
					}
					&:active{
						background: #333333;
						border-color: #333333;
					}
					&:focus{
						background: #333333;
						border-color: #333333;
					}
				}
			}
		}
	}
}
@mixin product-layout-home-6($linkColor:$linkColor, $border-radius: 5px) {
	padding-top: 20px;
	padding-bottom: 1px;
	&:hover{
		.product-img{
			background: rgba(0,0,0,.3);
			display: block;
			overflow: hidden;
		}
		.product-item-container .left-block .hover-1 ul li{
			bottom: 0;
		}
		.right-block{
			button{
				background: #333333;
				border-color: #333333;
				span{
					color: #fff!important;
				}
			}
			.caption{
				h4 a{
					color: $linkColor;
				}
			}
		}
	}
	.product-item-container{
		border: none;
		.left-block{
			position: relative;
			border: 1px solid #e5e5e5;
			border-radius: $border-radius;
			padding: 0;
			.product-image-container .product-img{
				display: block;
				overflow: hidden;
				img{
					width: 100%;
				}
				&:before{
					background-color: inherit;
					position: absolute;
					top: 0;
					bottom: 0;
					#{$left}: 0;
					#{$right}: 0;
					content: "";
					width: 100%;
					height: 100%;
					transition: all 0.5s;
				}
			}
			
			.new{
				@include span-new;
				top: 10px;
				#{$left}: 10px;
				background: #333333;
				text-transform: uppercase;
			}
			.sale{
				@include span-new;
				background: #ff5555;
				top: 10px;
				#{$right}: 10px;
			}
			.hover-1{
				@include classhover-home-6;
			}
		}

		.right-block{
			padding-top: 5px;
			h4{
				margin-bottom: 10px;
				margin-top: 10px;
				a{
					font-size: 14px;
					color: #444444;
					&:hover{
						color: $linkColor;
					}
				}
			} 

			.ratings{
				line-height: 30px;
				span i{
					color: #222222;
				}
				.gray i{
					color: #cccccc;
				}
			}
			.price{
				margin: 10px 0 15px;
				span{
					font-size: 18px;
					color: #ff5555;
					font-weight: 500;
				}
				.price-old{
					font-size: 14px;
					text-decoration: line-through; 
					color: #777777;
				}
			}
			.button-group{
				button{
					border-radius: 0;
					&:hover{
						background: #333333;
						border-color: #333333;
					}
					&:active:focus{
						background: #333333;
						border-color: #333333;
					}
					&:active{
						background: #333333;
						border-color: #333333;
					}
					&:focus{
						background: #333333;
						border-color: #333333;
					}
				}
			}
		}
	}
}

@mixin hr-3 {
	border-top: 1px dashed #dddddd;
	margin: 1px 0;
}

@mixin owl-nav($height, $border-radius) {
	div{
		width: $height;
		height: $height;
		line-height: $height;
		display: block;
		background: #f2f2f2;
		position: absolute;
		text-align: center;
		border-radius: $border-radius;
		&:after{
			font-size: 1.5em;
		}
		&:hover{
			background: $linkColor;
			&:after{
				color: #fff;
			}
		}
	}
	.owl-prev{
		&:after{
			content: "\f104";
			font-family: FontAwesome;
		}
	}
	.owl-next{
		&:after{
			content: "\f105";
			font-family: FontAwesome;
		}
	}
}
@mixin owl-nav2($height, $border-radius) {
	position: absolute;
	div{
		width: $height;
		height: $height;
		line-height: $height;
		display: inline-block;
		background: #f2f2f2;
		text-align: center;
		border-radius: $border-radius;
		&:after{
			font-size: 1.5em;
		}
		&:hover{
			background: $linkColor;
			&:after{
				color: #fff;
			}
		}
	}
	.owl-prev{
		
		&:after{
			content: "\f104";
			font-family: FontAwesome;
		}
	}
	.owl-next{
		margin-#{$left}: 5px;
		&:after{
			content: "\f105";
			font-family: FontAwesome;
		}
	}
}



//----------- HOME 3 -----------------

@mixin hr-home-3 {
	border-top: 1px solid $linkColor;
	width: 120px;
	position: relative;
	&:after{
		content: "+";
		font-family: FontAwesome;
		color: $linkColor;
		font-weight: 700;
		background: #fff;
		position: absolute;
		top: -13px;
		right: 50px;
		width: 23px;
		height: 23px;
		line-height: 23px;
		font-size: 30px;
		transform: rotate(45deg);
	}
}



//====== Minxin Loader Logo =======

@-webkit-keyframes animLoadedLogo {
	to {
		-webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
	}
}
@keyframes animLoadedLogo {
	to {
		-webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
		transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
	}
}

@-webkit-keyframes animLoadedLoader {
	to {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
	}
}
@keyframes animLoadedLoader {
	to {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
		transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
	}
}

@-webkit-keyframes animLoadedHeader {
	to {
		-webkit-transform: translate3d(0,-100%,0);
	}
}
@keyframes animLoadedHeader {
	to {
		-webkit-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0);
	}
}
@-webkit-keyframes animInitialHeader {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0,800px,0);
	}
}
@keyframes animInitialHeader {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0,800px,0);
		transform: translate3d(0,800px,0);
	}
}