header{
	.topbar{
		border-bottom: 1px solid #dcdcdc;
		.top-contact{
			ul{
				li{
					display: inline-block;
					padding: 5px 15px;
					color: #444444;
					font-size: 14px;
					border-right: 1px solid #dcdcdc;
					i{
						padding-right: 5px;
					}
				}
			}
		}
		.heiglight{
			ul{
				li{
					display: inline-block;
					padding: 5px 15px;
					border-right: 1px solid #dcdcdc;
					color: #444444;
					&:last-child{
						border:none;
					}
					a{
						color: #444444;
						i{
							padding-right: 5px;
							color: #444444;
						}
						&:hover{
							color: $primary-color;
						}
					}
					&.cart{
						position: relative;
						p{
							position: absolute;
							right: 0px;
							top: 5px;
							display: block;
							padding: 0;
							margin: 0;
							span{
								margin: -8px 0 0;
								padding: 3px !important;
								font-size: 10px;
								color: #fff;
								z-index: 999;
								position: relative;	
								display: block;
							}
							&:before{
								width: 17px;
								height: 17px;
								background: #000;
								border-radius: 100%;
							}
						}
					}
					&.cart-area{
						display: inline-block;
						.cart-list{
							position: absolute;
							width: 350px;
							background: #fff;
							right: 0;
							margin-top: 5px;
							display: block;
							padding: 30px 40px 30px 0;
							box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
							visibility: hidden;
							transform: translateY(30px);
							opacity: 0;
							transition: $transition;
							z-index: 999;
							.list{
								li{
									border-bottom: 1px solid #ddd;
									border-right: none;
									padding: 10px 0;
									a{
										display: inline-block;
										margin-right: 20px;
										&.close{
											margin-right: 10px;
										}
										img{

										}
									}
									.text{
										text-align: left;
										display: table;
										h4{
											margin: 0 0 15px;
										}
										.product-price{
											margin: 0;
											.price{
												color: $primary-color;
												font-size: 16px;
												font-weight: 700;
												&:before{
													content:none;
												}
											}
											.price-old{
												margin-right: 5px;
												font-size: 16px;
												font-weight: 700;
												&:before{
													content:none;
												}
											}
										}
										.close{
											position: absolute;
											right: 0;
											i{
												color: #000;
											}
										}
									}
								}
							}
							.total{
								display: block;
								position: relative;
								width: 100%;
								.left{
									font-weight: 700;
									float: left;
									font-size: 24px;
									margin: 5px 0 10px;
									color: #222;
									padding-left: 30px !important;
								}
								.right{
									font-weight: 700;
									float: right;
									font-size: 24px;
									color: $primary-color;
									margin: 5px 0 10px;
								}
							}
							.bottom{
								float: right;
								margin-top: 10px;
								a{
									padding-left: 10px !important;
									padding-right: 10px !important;
									overflow: inherit;
									margin: 0 1px;
								}
							}
						}
						&:hover{
							.cart-list{
								visibility: visible;
								transform: translateY(0);
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
	.header-top-two{
		background: #000;
		.top-contact{
			p{
				display: inline-block;
				padding: 5px 15px;
				color: #e8e8e8;
				font-size: 14px;
				margin: 0;
				i{
					padding-right: 5px;
				}
			}
		}
		.heiglight{
			ul{
				li{
					display: inline-block;
					padding: 5px 15px;
					border-right: 1px solid #dcdcdc;
					color: #e8e8e8;
					&:last-child{
						border:none;
					}
					a{
						color: #e8e8e8;
						i{
							padding-right: 5px;
							color: #e8e8e8;
						}
						&:hover{
							color: $primary-color;
						}
					}
					&.cart{
						position: relative;
						p{
							position: absolute;
							right: 0px;
							top: 5px;
							display: block;
							padding: 0;
							span{
								margin: -5px 3px 0;
								padding: 3px;
								padding: 0;
								font-size: 10px;
								color: #e8e8e8;
								z-index: 999;
								position: relative;
								display:block;
							}
							&:before{
								width: 17px;
								height: 17px;
								background: $primary-color;
								border-radius: 100%;
							}
						}
					}
					&.cart-area{
						display: inline-block;
						.cart-list{
							position: absolute;
							width: 350px;
							background: #fff;
							right: 0;
							margin-top: 5px;
							display: block;
							padding: 30px 40px 30px 0;
							box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
							visibility: hidden;
							transform: translateY(30px);
							opacity: 0;
							transition: $transition;
							z-index: 999;
							.list{
								li{
									border-bottom: 1px solid #ddd;
									border-right: none;
									padding: 10px 0;
									a{
										display: inline-block;
										margin-right: 20px;
										&.close{
											margin-right: 10px;
										}
										img{

										}
									}
									.text{
										text-align: left;
										display: table;
										h4{
											margin: 0 0 15px;
											color: #222;
										}
										.product-price{
											margin: 0;
											.price{
												color: $primary-color;
												font-size: 16px;
												font-weight: 700;
												&:before{
													content:none;
												}
											}
											.price-old{
												margin-right: 5px;
												font-size: 16px;
												font-weight: 700;
												color: #222;
												&:before{
													content:none;
												}
											}
										}
										.close{
											position: absolute;
											right: 0;
											i{
												color: #000;
											}
										}
									}
								}
							}
							.total{
								display: block;
								position: relative;
								width: 100%;
								.left{
									font-weight: 700;
									float: left;
									font-size: 24px;
									margin: 5px 0 10px;
									color: #222;
									padding-left: 30px !important;
								}
								.right{
									font-weight: 700;
									float: right;
									font-size: 24px;
									color: $primary-color;
									margin: 5px 0 10px;
								}
							}
							.bottom{
								float: right;
								margin-top: 10px;
								a{
									padding-left: 10px !important;
									padding-right: 10px !important;
									overflow: inherit;
									margin: 0 1px;
								}
							}
						}
						&:hover{
							.cart-list{
								visibility: visible;
								transform: translateY(0);
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}
	.header-top-three{
		background: #000;
		.top-contact{
			p{
				display: inline-block;
				padding: 5px 15px;
				color: #e8e8e8;
				font-size: 14px;
				margin: 0;
				i{
					padding-right: 5px;
				}
			}
		}
		.heiglight{
			ul{
				li{
					display: inline-block;
					padding: 5px 15px;
					border-right: 1px solid #dcdcdc;
					cursor: pointer;
					color: #e8e8e8;
					&:last-child{
						border:none;
					}
					a{
						color: #e8e8e8;
						i{
							padding-right: 5px;
						}
						&:hover{
							color: $primary-color;
						}
					}
				}
			}
		}
	}
	.header-top-four{
		.higlight{
			position: absolute;
			top:20px;
			right: 100px;
			ul{
				li{
					display: inline-block;
					padding: 6px 10px;
					cursor: pointer;
					color: #e8e8e8;
					i{
						transition: $transition;
						&:hover{
							color: $primary-color;
						}
					}
					a{
						color: #e8e8e8;
						i{
							padding-right: 5px;
							font-size: 24px;
						}
						&:hover{
							color: $primary-color;
						}
					}
					&.cart{
						position: relative;
						i{
							font-size: 24px;
							transition: $transition;
							&:hover{
								color: $primary-color;
							}
						}
						p{
							position: absolute;
							right: 0px;
							top: 5px;
							display: block;
							padding: 0;
							span{
								margin: -5px 3px 0;
								padding: 3px;
								padding: 0;
								font-size: 10px;
								color: #e8e8e8;
								z-index: 999;
								position: relative;
								display:block;
							}
							&:before{
								width: 17px;
								height: 17px;
								background: $primary-color;
								border-radius: 100%;
							}
						}
					}
					i{
						font-size: 24px;
					}
					&.cart-area{
						display: inline-block;
						.cart-list{
							position: absolute;
							width: 350px;
							background: #fff;
							right: 0;
							margin-top: 0px;
							display: block;
							padding: 30px 40px 30px 30px;
							box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
							visibility: hidden;
							transform: translateY(30px);
							opacity: 0;
							transition: $transition;
							z-index: 999;
							.list{
								li{
									border-bottom: 1px solid #ddd;
									border-right: none;
									padding: 10px 0;
									a{
										display: inline-block;
										margin-right: 20px;
										&.close{
											margin-right: 10px;
										}
										img{

										}
									}
									.text{
										text-align: left;
										display: table;
										h4{
											margin: 0 0 15px;
											color: #222;
										}
										.product-price{
											margin: 0;
											.price{
												color: $primary-color;
												font-size: 16px;
												font-weight: 700;
												&:before{
													content:none;
												}
											}
											.price-old{
												margin-right: 5px;
												font-size: 16px;
												font-weight: 700;
												color: #222;
												&:before{
													content:none;
												}
											}
										}
										.close{
											position: absolute;
											right: 0;
											i{
												color: #000;
											}
										}
									}
								}
							}
							.total{
								display: block;
								position: relative;
								width: 100%;
								.left{
									font-weight: 700;
									float: left;
									font-size: 24px;
									margin: 5px 0 10px;
									color: #222;
									padding-left: 30px !important;
								}
								.right{
									font-weight: 700;
									float: right;
									font-size: 24px;
									color: $primary-color;
									margin: 5px 0 10px;
								}
							}
							.bottom{
								float: right;
								margin-top: 10px;
								a{
									padding-left: 10px !important;
									padding-right: 10px !important;
									overflow: inherit;
									margin: 0 1px;
								}
							}
						}
						&:hover{
							.cart-list{
								visibility: visible;
								transform: translateY(0);
								opacity: 1;
							}
						}
					}
				}
			}
			.search-box{
				z-index: 999;
				.modal.fade.in .modal-dialog {
				    -webkit-transform: translate(0, 0%);
				    -ms-transform: translate(0, 0%);
				    -o-transform: translate(0, 0%);
				    transform: translate(0, 0%);
				    top: 25%;
				    left: 0;
				    right: 0;
				    width: 80%;
				    z-index: 99999999;
				}
				.popup-search {
				    position: relative;
				    padding: 90px 0px;
				    border-radius: 0;
				}
				.popup-search .close {
				    position: absolute;
				    right: 20px;
				    top: 20px;
				}
				.modal-body {
				    padding: 0 50px;
				}
				.input-group {
				    margin: 0 auto;
				    display: inline-block;
				    position: relative;
				    width: 100%;
				}
				.form-control.control-search {
				    color: #333;
				    height: 42px;
				    border: 1px solid $primary-color;
				    border-radius: 0;
				    &:focus{
				    	outline:none;
				    	box-shadow: none;
				    }
				}
				button.button_search {
				    background: $primary-color;
				    font: 700 16px/43px "Roboto Condensed";
				    color: #fff;
				    text-transform: uppercase;
				    text-align: center;
				    width: 130px;
				    padding: 0px;
				    border: none;
				    position: absolute;
				    right: 0px;
				    top: 0px;
				    transition: $transition;
				    z-index: 99;
				    box-shadow: none;
				}
			}
		}
	}
}