a:hover{color: $color5;}
// HOME SLIDE
.home-slider{
	.item-slider{
		position: relative;
		.c-img{
			padding-top: 54.7%;
		}
		.slider-info-box{
			max-width: 78%;
			font-size: 10px;
			text-align: left;
			margin: 0 auto;
			color: #fff;
		}
		.slider-info{
			z-index: 1;
			text-align: center;
			position: absolute;
			top: 14%;
			left: 0;
			right: 0;
			.small-title{
				padding-bottom: 0.7em;
				font-size: 3em;
				line-height: 1;
				font-weight: 400;
				font-style: italic;
				position: relative;
				margin-bottom: 0.7em;
				font-family: "Lobster";
				color: #edf349;
				&:before{
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 35px;
					height: 1px;
					background: #fff;
				}
			}
			.small-desc{
				margin: 0;
				font-size: 2em;
				font-weight: 400;
			}
			.big-title{
				font-size: 5em;
				margin-bottom: 0.2em;
			}
			.show-now{
				font-size: 14px;
				font-weight: 700;
				display: inline-block;
				border: 1px solid #fff;
				color: #fff;
				padding: .7rem 2.6rem;
				margin-top: 2.7em;
				background-color: transparent;
				&:hover{
					border: 1px solid $color5;
					background-color: $color5;
				}
			}
		}
	}

	.owl2-controls{
		.owl2-nav{
			> div{
				font-size: 7rem;
				color: #cce8f4;
				position: absolute;
				top: calc(50% - 69px / 2);
				@include smooth(.2s);
				&:hover{
					color: $color5;
				}
			}
			.owl2-prev{
				left: 20px;
			}
			.owl2-next{
				right: 20px;
			}
		}
	}

	.owl2-dots{
		position: absolute;
		right: 0;
		left: 0;
		bottom: 15px;
		text-align: center;
		.owl2-dot{
			display: inline-block;
			span{
				width: 9px;
				height: 9px;
				display: block;
				background-color: #fff;
				border-radius: 50%;
				opacity: 1;
				margin: 0 4px;
				transition: all .2s ease-in-out;
			}
			&.active{
				span{
					background-color: $color5;
				}
			}
		}
	}
}
// HOME SLIDE

// BEGIN DEALS DAYS
.deals-days{
	background-color: #fff;
	padding-top: 3rem;
	height: auto;
	padding-bottom: 2rem;
	.container{
		font-size: 0;
	}
	.label-sale{
		font-size: 14px;
	}
	.deals-title{
		text-transform: uppercase;
		color: $color5;
		border-bottom: none !important;	
		span{
			font-weight: 300;
			color: #444444;	
		}
	}

	.deals-box{
		.product-image-right{
			border: 1px solid $border;
		}
	}

	.deals-left{
		height: 500px;
		overflow: hidden;
		border: 1px solid #dddddd;
		padding-bottom: 0;
		margin-bottom: 20px;
		&.sale-product{
			float: left;
		}
	}
	.deals-right{
		width: 23.08%;
		border-left: none;
		height: 500px;
		overflow: hidden;
		border: 1px solid #dddddd;
		float: right;
		.deals-right-desc .deals-box{
			border-top: 1px solid $border;
			border-bottom: none;
		}
		&.popular-product{
			float: right;
		}
	}
	.deals-center{
		width: calc(100% - 23.08% * 2);
		border: 1px solid #dddddd;
		border-left: none;
		border-right: none;
		height: 500px;
		overflow: hidden;
		margin-bottom: 20px;
		float: none;
		display: inline-block;
		.left-group{
			left: 10px;
			top: 5px;
			.table-countdown .countdown-box .time{
				color: $color5;
				font-size: 14px;
			}
		}
	}
	.popular-product-slider{
		.owl2-controls{
			.owl2-nav{
				> div{
					position: absolute;
					top: calc(50% - 35px /2 - 8px);
					width: 0;
					height: 0;
					background-color:#fff;
					text-align: center;
					display: inline-block;
					line-height: 35px;
					border: 1px solid $border;
					z-index: 1;
					font-size: 14px;
					@include transform(scale(0));
					@include smooth(.2s);
					&:hover{
						background-color: $color5;
						color: #fff;
						.owl2-prev{
							border-left:none;
							border: 1px solid $color5;
						}
						.owl2-prev{
							border-right:none;
							border: 1px solid $color5;
						}

					}
				}
				.owl2-prev{
					left: 0;
					border-left: none;
				}
				.owl2-next{
					right: 0;
					border-right: none;
				}
			}
		}
		&:hover{
			.owl2-controls{
				.owl2-nav{
					> div{
						width: 35px;
						height: 35px;
						@include transform(scale(1));
					}
				}
			}
		}
	}
	.deals-center-slider .owl2-controls .owl2-nav div:hover{background-color: $color5; border-color: $color5;}
}
// END DEALS DAYS
// BEGIN BANNERS
.banner{
	padding-bottom: 2rem;
	.collection-left, .collection-right{
		position: relative;
		.c-img{
			padding-top: 69.24%;
		}
		.banner-info{
			color: #fff;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 3.5rem 4rem;
			.banner-title{
				color: $color5;
				font-size: 3rem;
				text-transform: uppercase;
				span {
					font-weight: 300;
					color: #fff;
				}
			}
			.banner-small-title{
				font-size: 1.8rem;
				color: #fff;
			}
			.banner-desc{
				font-size: 12px;
			}
			.shop-now{
				padding: 11px 29px 12px 28px;
				color: #fff;
				background-color: rgba(255, 255, 255, 0.2);
				display: inline-block;
				margin-top: 1.5rem;
				font-weight: 700;
				font-size: 14px;
				@include smooth(.4s);
			}
		}
	}
	.collection-right{
		.c-img{
			padding-top: 34.62%;
		}
		.banner-info{
			.banner-title{
				color: #f0e536;
			}
		}
	}
}
// END BANNERS

// CATEGORY TAB
.category-tab{
	.category-title{
		background-color: $color5;
		font-size: 2rem;
		color: #fff;
		font-weight: 700;
		text-transform: uppercase;
		cursor: default;
		margin: 0;
		padding: 3rem 0  3rem 0;
		text-align: center;
		border: none;
		>span{
			font-weight: 300;
		}
	}
	.so-listing-tabs {
		.ltabs-wrap .ltabs-tabs-container{
			margin: 0 10px 4rem 10px;
		}
		.ltabs-tabs-wrap{
			width: 17.1%;
			float: left;
			ul.ltabs-tabs{
				text-align: left;
				background-color: #f5f5f5;
				border: 1px solid #dddddd;
				height: 457px;
				.ltabs-tab{
					border: none;
					border-bottom: 1px solid #dddddd;
					font-size: 12px;
					color: #555555;
					margin: 0 2.9rem;
					padding: 5px 0px;
					span{
						display: inline-block;
						line-height: 22px;
						text-transform: capitalize;
						padding: 0;
					}
					&.tab-sel {
						position: relative;
						background-color: transparent;
						&:before{
							content: "\f067";
							font-family: "fontawesome";
							font-size: 12px;
							color: $color5;
							position: absolute;
							left: 0;
							line-height: 1;
							top: calc(50% - 6px);
						}
						span{
							color: $color5;
							padding: 0 10px 0 16px;
						}
					}
					&:hover{
						background-color: transparent;
						span{
							color: $color5;
						}
					}
				}
			}
		}
		.ltabs-items-container{
			width: 68.4%;
			float: left;
			padding-left: 0px;
		}
	}
	.product-box{
		margin-bottom: 0px;
		border-left: none;
		.button-group{
			button{
				&:hover{
					background-color: $color5;
					color: #fff;
				}
			}
			.add-to-cart{
				color: $color5;
			}
		}
		.price{
			margin: 0;
		}
		.label-sale.red-right{
			background-color: #03a9f4;
			&:before{
				border-bottom: 5px solid #03a9f4;
			}
		}
	}
	.category-tab-banner{
		img{
			height: 538.5px;
		}
	}

	.category-tab-slider{
		&:hover{
			.owl2-controls{
				.owl2-nav{
					div{
						opacity: 1;
						font-size: 14px;
						&.owl2-prev{
							left: 0px;
						}
						&.owl2-next{
							right: 0px;
						}
					}
				}
			}
		}
		.owl2-controls{
			.owl2-nav{
				div{
					display: inline-block;
					width: 35px;
					height: 35px;
					text-align: center;
					line-height: 35px;
					border: 1px solid #dddddd;
					color: #aeaeae;
					position: absolute;
					top: calc(50% - 35px / 2);
					transition: all .2s ease-in-out;
					z-index: 999;
					opacity: 0;
					@include smooth(.5s);
					&:hover{
						background-color: $color5;
						color: #fff;
					}
					&.owl2-prev{
						left: 40px;
					}
					&.owl2-next{
						right: 40px;
					}
				}
			}
		}
	}
	.category-tab-banner{
		width: calc(100% - 17.1% - 68.4%);
		float: left;
	}
	.category-hot-product{
		.col0:last-child{
			.hot-product-box{
				border-right: none;
			}
		}
		.hot-product-box{
			padding: 20.5px 20px;
			border-bottom: 1px solid $border;
			border-right: 1px solid $border;
			.box{
				margin-left: 112px;
			}
			.product-image-right{
				float: left;
				border: 1px solid $border;
				text-align: center;
			}
			.product-name{
				margin-top: 0;
				text-transform: uppercase;
				line-height: 20px;
			}
			.price{
				margin: 0;
			}
		}
	}
	.so-listing-tabs:nth-child(even){
		.ltabs-wrap .ltabs-tabs-container{
			font-size: 0;
			.category-tab-banner{
				float: left;
			}
			.ltabs-items-container{
				display: inline-block;
				float: none;
			}
			.ltabs-tabs-wrap{
				float: right;
			}
		}
	}
}
// CATEGORY TAB

.customer-opinion .customer-opinion-slider .owl2-controls .owl2-nav div:hover{background-color: $color5;}

// FEATURED-SALE-TAB
// .featured-sale-tab{
// 	padding-top: 4rem;
// 	padding-bottom: 1rem;
// 	.so-listing-tabs {
// 		overflow: visible;
// 		.ltabs-wrap{
// 			overflow: visible;
// 			.ltabs-items-container{
// 				overflow: visible;
// 				.ltabs-items{
// 					overflow: visible;
// 				}
// 				.ltabs-items-inner{
// 					overflow: visible;
// 				}
// 			}
// 		}
// 	}
// 	.featured-sale-box{
// 		position: relative;
// 	}
// 	.featured-sale-title{
// 		font-size: 2rem;
// 		position: relative;
// 		color: $color5;
// 		padding-bottom: 1.5rem;
// 		margin-bottom: 3rem;
// 		width: calc(100% - 90px);
// 		span{
// 			font-weight: 300;
// 			color: #444444;
// 		}
// 		&:before{
// 			content: "";
// 			position: absolute;
// 			bottom: 0;
// 			left: 0;
// 			width: 100%;
// 			height: 1px;
// 			background: #dddddd;
// 		}
// 		&:after{
// 			content: "";
// 			position: absolute;
// 			bottom: 0;
// 			left: 0;
// 			width: 30px;
// 			height: 2px;
// 			background: $color5;
// 		}
// 	}
// 	.ltabs-tabs-wrap{
// 		position: absolute;
// 		top: 0;
// 		right: 90px;
// 		ul.ltabs-tabs{
// 			font-size: 0;
// 			.ltabs-tab{
// 				display: inline-block;
// 				background-color: #f7f7f7;
// 				padding: 3px 11px 2px 11px;
// 				margin: 0 3px 0 0;
// 				&:last-child{
// 					margin: 0;
// 				}
// 				span{
// 					text-transform: capitalize;
// 					color: #555555;
// 					padding: 0;
// 				}
// 				&:hover{
// 					background-color: $color5;
// 					span{
// 						color: #fff;
// 					}
// 				}
// 				&.tab-sel {
// 					position: relative;
// 					background-color: $color5;
// 					padding: 3px 13px 2px 25px;
// 					&:before{
// 						content: "\f067";
// 						font-family: "fontawesome";
// 						font-size: 12px;
// 						color: #fff;
// 						position: absolute;
// 						left: 8px;
// 						line-height: 1;
// 						top: calc(50% - 6px);
// 					}
// 					span{
// 						color: #fff;
// 					}
// 				}
// 			}
// 		}
// 	}
// 	.featured-product-box{
// 		border: none;
// 		text-align: left;
// 		margin-bottom: 15px;
// 		.product-image{
// 			width: 160px;
// 			border: 1px solid #dddddd;
// 			line-height: 160px;
// 			float: left;
// 		}
// 		.product-info{
// 			float: left;
// 			margin-left: 20px;
// 			padding-top: 10px;
// 			width: calc(100% - 180px);
// 			padding-right: 10px;
// 			.product-name{
// 				margin-bottom: 5px;
// 			}
// 			.price{
// 				text-align: left;
// 				margin: 0;
// 			}
// 		}
// 		.button-group{
// 			width: 180px;
// 			border: 1px solid #dddddd;
// 			.wishlist-btn{
// 				height: 35px;
// 				line-height: 35px;
// 				width: 35px;
// 				border-left: 1px solid $border;
// 				&:hover{
// 					background-color: $xanh2;
// 				}
// 			}
// 			.add-to-cart{
// 				height: 35px;
// 				line-height: 35px;
// 				width: calc(100% - 70px);
// 				color: $xanh2;
// 				&:hover{
// 					background-color: $xanh2;
// 					color: #fff;
// 				}
// 			}
// 		}
// 	}
// 	.featured-tab-slider{
// 		.owl2-controls{
// 			position: absolute;
// 			top: -50px;
// 			right: 0;
// 			.owl2-nav{
// 				> div{
// 					width: 35px;
// 					height: 35px;
// 					background-color:#fff;
// 					text-align: center;
// 					display: inline-block;
// 					line-height: 35px;
// 					color: #cecece;
// 					font-size: 20px;
// 					border: 1px solid $border;
// 					position: unset;
// 					@include smooth(.2s);
// 					&:hover{
// 						background-color: $color5;
// 						color: #fff;
// 					}
// 				}
// 				.owl2-prev{

// 				}
// 				.owl2-next{
// 					margin-left: 5px;
// 				}
// 			}
// 		}
// 		&.owl2-carousel .owl2-item img{width: auto;}
// 	}
// }
.featured-sale-tab .ltabs-tabs-wrap ul.ltabs-tabs .ltabs-tab.tab-sel{background-color: $color5;}

// FEATURED-SALE-TAB

// INFOMATION SHIPPING
.infomation{
	padding-bottom: 3.5rem;
	.infomation-bg{
		background-color: #49ccf3;
		.box:nth-child(2){
			.infomation-box{
				background-color: #ffce64;
				&:before{
					border-right: 30px solid #ffce64;
				}
				&:after{
					border-left: 40px solid #ffce64;

				}
			}
		}
	}
}
// INFOMATION SHIPPING

// BLOGS
.blogs{
	background-color: #f7f7f7;
	.featured-title{
		margin-bottom: 2.5rem;
		> span{
			position: relative;
			&:before{
				content: "";
				position: absolute;
				left: calc(50% - 15px);
				bottom: 0;
				background: $color5;
				width: 30px;
				height: 1px;
			}
			color: $color5;
			border: none;
		}
	}
}
// BLOGS

.brands{
	padding: 4rem 0;
	.brand-left{
		width: 23.08%;
		float: left;
		.brand-title{
			padding: 51px 0 50.5px 0;
			font-size: 2rem;
			background-color: $color5;
			font-weight: 700;
			text-align: center;
			color: #fff;
			> span{
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				position: relative;
				&:before{
					content: "";
					border-top: 6px solid #fff;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					position: absolute;
					left: calc(50% - 5px);
					bottom: -6px;
				}
				> span{
					font-weight: 300;
				}
			}
		}
	}
	.brand-center{
		width: calc(100% - 23.08%);
		float: left;
	}
	.brand-center-slider{
		.owl2-controls{
			.owl2-nav{
				> div{
					width: 35px;
					height: 35px;
					background-color: #fff;
					border: 1px solid $border;
					position: absolute;
					top: calc(50% - 35px / 2);
					color: #b6b6b6;
					text-align: center;
					line-height: 35px;
					font-size: 16px;
					@include smooth(.2s);
					&:hover{
						background-color: $color5;
						color: #fff;
						border: 1px solid $color5;
					}
				}
				.owl2-prev{
					right: calc(100% - 35px / 2);
				}
				.owl2-next{
					left: calc(100% - 35px / 2);
				}
			}
		}
	}
}
@include breakpoint(sm){
	html {
		font-size: calc(14px * 62.5 / 100);
	}
}
@include breakpoint(xs){
	html {
		font-size: calc(12px * 62.5 / 100);
	}
}