/*------------------------------------
	[Table of contents]
	1. Body
	2. Header / #header
	3. Navigation / #navbar
	4. Content / #content
	5. Sidebar / #sidebar
	6. Search / #search
	7. Footer / #footer
	
--------------------------------------*/
@import "bootstrap/mixin";
@import "bootstrap/mixin-input-number";
body{@include background-image("img/BG-home1.jpg",-515px 0,auto);}
	.slider-nav{
		button{display: none;}
		.slick-slide{
			margin: 0 0px 0 10px;
			
		}
		.slick-list{padding: 0 !important;}
	}
	@media (min-width: 1400px){
		.container{
			width:1380px;
		}
	}
	
	header{
	padding:30px 0;
	.menu-main{position:relative;padding-top:20px;
	li{padding-right:22px;
	&:first-child{a{padding-left:0;}}
	&.menu-home{
		.dropdown-menu{@include dropdown;	top: 70%;			
					&.menu-home-lv2{left: -20px;padding-left: 20px;
						.li-home{list-style-type: none;padding: 10px 0;i{visibility: hidden;opacity: 0;padding-right: 5px;transition: all .3s ease;
							@media (min-width: 1025px){
								margin-left: -18px;
							}
						}
						
						a{display:inline-block;transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;&:hover{text-decoration:none;
						 color: black;font-weight: 600;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
				
		
			.li-banner{padding: 20px 20px 0 0;
				img{width: 100%;}
			}
		}
		&:hover{
			@include dropdown-hover;
		}
	}
	&.shop-menu{#shop-1{@include figure;}&:hover{#shop-1{@include figure-hover;}}
	.dropdown-menu{border-radius: 0;border: 0;left: -336px;	top: 70%;
			display: block;
			visibility: hidden;
			opacity: 0;
			transition: all .35s ease;
			ul{padding: 10px 0;a{@include font-face(Poppins,14px,600);&:hover{text-decoration:none;opacity: .5;}}
				li{
					list-style-type: none;
					.menu-home-lv2{
						ul{
						.li-home{ margin-left: -18px;padding: 10px 0;i{visibility: hidden;opacity: 0;padding-right: 5px;transition: all .3s ease;}
						&.li-one{padding-top: 30px;}
						a{transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;&:hover{text-decoration:none; color: black;font-weight: 600;opacity: 1;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{display:inline-block;text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
					}
				}
			}
			.li-banner{padding: 20px 45px;
				img{width: 100%;}
			}
		}
		&:hover{
			.dropdown-menu{
				visibility: visible;
				opacity: 1;
				transform: translateY(15px);
			}
		}

	}
	&.menu-home{#home-1{@include figure;left: -5px;}&:hover{#home-1{@include figure-hover;}}}
	&.shop-menu{#shop-1{@include figure;visibility: visible;opacity: 1;left: 15px;}}
	&.wedding-menu{#wedding-1{@include figure;}&:hover{#wedding-1{@include figure-hover;}}}
	&.blog-menu{
		#blog-1{@include figure;}&:hover{#blog-1{@include figure-hover;}}
		.dropdown-menu{@include dropdown;	top: 70%;			
					&.menu-home-lv2{left: -20px;padding:0 20px;width: 300px;
						.li-home{list-style-type: none;padding: 10px 15px;i{visibility: hidden;opacity: 0;transition: all .3s ease;
							@media (min-width: 1025px){
								margin-left: -18px;
							}
						}
						
						a{display:inline-block;transition: all .3s ease;@include font-face(Poppins,14px,400);color: grey;padding-left: 5px;
							&:hover{text-decoration:none; color: black;font-weight: 600;}}
						&:hover{i{visibility: visible;opacity: 1;transform: translateX(18px);}
						a{text-decoration:none; color: black;font-weight: 600;transform: translateX(18px);}
					}
					}
					}
				
		
			.li-banner{padding: 20px 45px;
				img{width: 100%;}
			}
		}
		&:hover{
			@include dropdown-hover;
		}
	}
	&.contact-menu{#contact-1{@include figure;}&:hover{#contact-1{@include figure-hover;}}}

	a{&:hover{background-color:unset;}@include font-face(Poppins,18px,lighter);&#shop-menu{font-weight:bold;}&:focus{background-color:unset;}}
	}
}
.icon-menu{position:relative;padding-top:20px;&::before{content:"3";width:20px;height:20px;background-color:black;position:absolute;text-align: center;right:18px;
border-radius: 50%;
	top: 30px;color: white;}
	li{
	.fa-user{font-size:22px;padding-right:30px;color:black;}
	img{padding-right:15px;&#search-img{margin-right:40px;}}
	a{&:hover{background-color:unset;}&:focus{background-color:unset;}}
	&#input-search{
		position:relative;
	.alert-search{position:absolute;width: 230px;top: 50px;right: 40px;background:rgba(255,255,255,0.95);
	border: 0;border-radius: 0;padding: 0 25px;box-shadow:0 10px 10px rgba(0,0,0,0.05);
	.close{position:absolute;top: 4px;right: 6px;}
	.form-group{.form-control{@include input-defaut;border-bottom:1px solid grey;}margin:10px 0;}
	}
	}
	}
	.cart-menu{
		.dropdown-menu{
			position: absolute;
			background: #fff;
			right: 20px;
			border: 0;
			border-radius: 0;
			width: 310px;
			padding: 20px;
			#div-cart-menu{
				display: inline-flex;
			}
			a{@include btn-shopnow;@include font-face(Poppins,14px,400);color: #fff;padding: 10px 15px;
				&.check{margin-left: 30px;}
			}
		}
		.cart-1{
			padding-bottom: 20px;
			clear: left;
			display: inline-block;
		}
		.img-cart{
			width: 30%;
			float: left;
		}
		.info-cart{
			padding-left: 15px;
			float: left;
			h1{@include font-face(Poppins,14px,600);margin-top: 0;}
			span{@include font-face(Poppins,14px,500);
				&.number{padding-right: 30px;}
				&.prince-cart{font-weight: 600;}
			}
		}
		.total{
			padding: 0 15px 30px 0;
			@include font-face(Poppins,16px,600);
			span{margin-right: 40px;}
		}
	}
}
}
.menu-breadcrumb{
	    padding: 60px 0 20px 0;
	border-top: 1px solid #ddd;
	width: 100%;
}
.product-content{
	.img-content{padding-left: 0;
		
			img{width: 100%;}
		
	}
	.detail{
		h1{@include font-face(Poppins,24px,600);margin-top: 0;}
		p{@include font-face(Poppins,14px,400);color: #888888;padding-bottom: 20px;}
		.star{color:#e18787;padding-bottom: 30px;
			i{padding-right:2px;}
			span{@include font-face(Poppins,14px,400);color: #888888;padding-left: 10px;}
		}
		.prince{@include font-face(Poppins,24px,600);    margin-right: 230px;padding-bottom:30px;border-bottom:1px solid #ddd;
			.strike{font-size:14px;font-weight:400;color:lightgrey;padding-left:10px;}}
		.fi-option{position: relative;
			.option{
				padding-top: 30px;
				@include font-face(Poppins,18px,600);
			}
			&::before{content: "";width: 30px;height:2px;background: black;position: absolute;    bottom: 12px; }
		}
		.size{@include font-face(Poppins,18px,400);padding-left: 0;
			.sta-red{color: red;}

		}
		.color{
			@include font-face(Poppins,18px,400);
			.sta-red{color: red;}
			.lb-color{
				padding-bottom: 15px;
				display: inline-block;
			}
			.color-1{display: inline-block;width: 40px;height: 40px;border-radius: 50%;border: 1px solid #ddd;background: #f1b8b7;margin-right: 10px;transition: all .3s ease;
				&:hover{opacity:.5;}
			}
			.color-2{@extend .color-1;background: #fccf61;}
			.color-3{@extend .color-1;background: #fff;}
			.color-4{@extend .color-1;background: #bf1324;}
			.color-5{@extend .color-1;background: #f8edab;}
		}
		.select-custom{padding-top: 15px;
			.select{margin-left: 0 !important;margin-right: 120px;
				.select-styled{background: #fff !important;color: #888888 !important;border:1px solid #ddd;}
			}
			}

			
		
		.require{clear: left; padding: 30px 0;color: red;border-bottom: 1px solid #ddd;    margin-right: 230px;}
		.Quality{
			@include font-face(Poppins,18px,400);padding: 30px 0;
			.text-qua{padding-right: 20px;}
			.dola{@include font-face(Poppins,24px,600);padding-left: 90px;padding-right: 5px;}
			.total-prince{@include font-face(Poppins,24px,600);}
		}
		.add-cart{
			.btn-add-cart{display: inline-block;@include font-face(Abril Fatface,24px,400);padding: 13px 30px;background: black;color: #fff;transition: all .3s ease;border: 1px solid black;
 				&:hover{@include btn-style(30deg,black,#fff);text-decoration: none;}
 			}
 			.list-icon{display:inline-block;font-size: 18px;padding: 16px 19px; border-radius: 50%;background: #eeeeee;color: #888888;margin-left: 15px;transition: all .3s ease;
 				&:hover{color:black;}
 			}
		}
	}
}
	.connect-us{padding-top: 40px;
		a{
			display: inline-block;
			width: 80px;
			height: 20px;
			margin-right: 15px;
			&#like-fb{@include background-image("img/like-fb.png",0 0,20px);}
			&#like-tw{@include background-image("img/like-fb.png",-96px 0,20px);}
			&#like-gg{@include background-image("img/like-fb.png",-190px 0,20px);margin-right: 0;}
			&#like-share{@include background-image("img/like-fb.png",-261px 0,20px);width: 60px;}
		}
	}

.product-text{
	padding: 140px 0;
	.menu-tab{
		li{position: relative;
			a{@include font-face(Poppins,24px,400);padding-left: 0;padding-right: 80px; transition: all .5s ease;
				&:hover{
					background:transparent;opacity: .7;
				}
			}
			&.active{
				a{@include font-face(Poppins,24px,600);}
				#fi-decription{
					content: "";
					width: 40px;
					height: 2px;
					background: black;
					position: absolute;
					bottom: 5px;
				}
				#fi-product-tag{@extend #fi-decription;}
				#fi-write{@extend #fi-decription;}
				#fi-addtional{@extend #fi-decription;}
			}
		}
	}
	.tab-content{
		padding-top: 45px;
		p{@include font-face(Poppins,14px,400);color: #888888;}
	}
}
.related{padding: 0 0 140px 0;
	h1{@include font-face(Poppins,24px,400);padding-bottom: 40px;}
	.product-category{
	padding-bottom: 50px;
	.product-title-category{text-align:center;
	padding-bottom:20px;
	h5{a{@include font-face(Poppins,16px,400);&:hover{text-decoration:none;color:pink;}}}
	.star{color:#e18787;i{padding-right:2px;}}
	.prince{@include font-face(Poppins,18px,600);padding-top:5px;
		.strike{font-size:14px;font-weight:400;color:lightgrey;padding-left:10px;}}
	
	}
	
	.product-image-category{position:relative;transition:all .5s ease;
	&:hover{.product-icon-category{opacity:1;transform:scale(1);}box-shadow: 0 0px 20px 0 rgba(0, 0, 0, .2);}
	.product-icon-category{@include product-icon(40%);}
	.hot{&::before{@include font-face(Poppins,14px,500);position:absolute;width:45px;height:25px;content:"HOT";background-color:#e18787;color:white;padding:2px 0 0 6px;right:0;}}
	.sale{&::before{@include font-face(Poppins,14px,500);position:absolute;width:45px;height:25px;content:"SALE";background-color:#e18787;color:white;padding:2px 0 0 6px;right:0; 
	   letter-spacing: 1px;}}
	}

}
}
.info-footer{padding: 140px 0;border-top: 1px solid #ddd;
	h3{@include font-face(Abril Fatface,18px,400);padding-bottom:30px;}
	ul{padding:0;
	li{list-style-type:none;padding-bottom:15px;
		i{margin-left: -16px;padding-right: 5px;visibility: hidden;opacity: 0;transition: all .3s ease;}
		a{transition: all .3s ease;
		@include font-face(Poppins,14px,400);color:grey;&:hover{text-decoration:none;color:black;font-weight:600;}}
		&:hover{
			i{visibility: visible;opacity: 1;transform: translateX(16px);}
			a{display: inline-block; text-decoration:none;color:black;font-weight:600;transform: translateX(16px);}
		}
	}
	}
	.social{
		p{@include font-face(Poppins,14px,500);padding-top: 20px;}
		a{display: inline-block;width: 35px;height: 35px;margin-right: 10px; opacity: .3;transition: all .5s ease;
			&#link-insta{@include background-image("img/social-v3.png",0 0,35px);}
			&#link-fb{@include background-image("img/social-v3.png",-35px 0,35px);}
			&#link-tw{@include background-image("img/social-v3.png",-70px 0,35px);}
			&#link-sky{@include background-image("img/social-v3.png",-105px 0,35px);}
			&:hover{
				opacity: 1;
			}
		}
		h1{@include font-face(Abril Fatface,30px,400);padding-top: 10px;}
		h2{@include font-face(Poppins,14px,400);color: #888888;}
		form{position: relative;margin-top: 10px;
			input{@include input-defaut;border-radius: 40px;border: 1px solid #cfcfcf;width: 100%;padding-left: 20px;
			&::-webkit-input-placeholder{@include font-face(Poppins,14px,400);}
		}
		button{@include btn-defaut(transparent);position: absolute;right: 20px;top: 10px;
			img{transition: all .3s ease;}
			&:hover{
				img{
					transform:translateX(5px);
				}
			}
		}
		}
		
	}
}
footer{background: #f4f4f4;padding-bottom: 22px;
	.logo-bot{display:inline-block;@include background-image("img/logo.png",0 -46px,33px);width:104px;margin-top: 40px;}
	span{
	display:inline-block;@include font-face(Poppins,14px,300);padding-top:40px;&#gmail-footer{a{font-weight:400;font-size:13px;color:black;&:hover{text-decoration:none;color:pink;}}
	padding-top:45px;}}
	i{padding:0 5px;}
	.gmail-footer{text-align: right;}
	.copy{text-align: center;}
}