/*  Style for Theme header  */

header#site-header{
	width:100%;
	background:#fff;
	border-bottom:1px solid #f5f5f5;

	.site-menu{
		ul{
			list-style:none;
			float:right;
			margin-bottom:0px;

			li{
				display:inline-block;

				a{
					padding:25px 10px;
					color:#333;
					font-size:15px;
					display:inline-block;
					text-align:center;
					line-height:15px;

					&:hover{
						text-decoration:none;
					}
				}
				a.btn{
					padding:15px 25px;
				}
				ul.sub-menu{
					padding:0;
					width:200px;
					li{
						display:block;
						width:100%;
						a{
							display:block;
							padding:15px 10px;
							text-align:left;
							background:none;
						}
						ul.sub-menu{
							top:-3px;
							left:190px;
						}
						&:hover{
							ul.sub-menu{
								display:block;
							}
						}
					}
				}
			}
			li.active{
				a{
					font-weight:bold;
					border-bottom:3px solid $primary-color;
					color:$primary-color;
				}
				a.btn{
					border-width:1px;
					color:auto;
				}
			}
		}

		#cart{
			.dropdown-toggle{
				font-size:20px;
				display:inline-block;
				padding:15px;
				cursor:pointer;
				padding-top:20px;
				float:right;
			}
		}
		#cart{
			.dropdown-toggle{
				position:relative;
				.cart{
					background:url('../images/cart.png') no-repeat center center;
					padding:0px 20px;

					.notify{
						width:20px;
						height:20px;
						border-radius:50%;
						background:#f00;
						position:absolute;
						top:15px;
						right:15px;
						color:#fff;
						text-align:center;
						font-size:15px;
						font-weight:bold;
						&.nocart{
							background:#333;
						}
					}
				}
			}
			.dropdown-menu{
				padding:0px;
				width:250px;
				box-shadow:0px 0px 8px 1px rgba(0,0,0,0.1);

				.no-cart-item{
					padding:10px;
					text-align:center;
				}

				.cart-details{
					.cart-details-header{
						background:#f9f9f9;
						padding:10px;
						text-align:center;
					}
					.cart-details-body{
						padding:10px;
						overflow:hidden;
						max-height:350px;
						overflow:hidden;
						overflow:auto;

						ul.cart-items{
							padding:0px;
							width:100%;

							li{
								padding:10px 0px;
								width:100%;

								span{
									display:inline-table;

									&.product-name{
										width:70%;
									}
								}
							}
						}
					}
					.cart-details-footer{
						background:#f9f9f9;
						padding:10px;
					}
				}

				&::before{
					position: absolute;
					top: -7px;
					right: 15px;
					display: inline-block;
					border-right: 7px solid transparent;
					border-bottom: 7px solid #ccc;
					border-bottom-color: rgb(204, 204, 204);
					border-left: 7px solid transparent;
					border-bottom-color: rgb(176, 176, 176);
					content: '';
				}
			}
		}
	}
	
	.site-logo{
		position:relative;
		z-index:1;
		a{
			text-decoration:none;
		}
		img{
			width:100%;
		}
		.site-title{
			margin-top:15px;
			color:#333;
		}
	}

	.btn-toogle{
		display:none;
		width:40px;
		cursor:pointer;
		font-size:18px;
		padding:0px 15px;
		text-align:center;
		margin-top:15px;
	}

	.search-box{
		margin:20px 0px 0px 10px;
		position:relative;
		z-index:1;
		cursor:pointer;
		float:right;
	}

}

.search-form{
	width: 60%;
	background: #fff;
	box-shadow:0px 0px 8px 1px rgba(0,0,0,0.1);
	padding: 20px;
	text-align: center;
	margin-left: 20%;
	position:absolute;
	z-index:1000;
	display:none;

	label{
		width:90%;
		float:left;
		input{
			border:1px solid #e8e8e8;
			padding:7px 10px 7px 25px;
			width:100%;
			background:url('../images/search.png') no-repeat 5px 10px;
		}
	}
}

header#site-header.header-is-sticky{
	position:fixed;
	z-index:1000;
	width:100%;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	top:0px;
}

@media only screen and (max-width:767px){
	header#site-header{
		.search-box{
			margin-bottom:15px;
			margin-top:10px;
			float:none;
			text-align:center;
		}
		.btn-toogle{
			display:block;
			text-align:center;
			margin-left:43%;
		}
		.site-menu{
			display:none;
			position:absolute;
			background:#fff;
			width:100%;
			z-index:1000;

			ul{
				float:left;
				padding:0px;
				width:100%;

				li{
					display:block;
					border-bottom:1px solid #e8e8e8;

					a{
						width:100%;
						padding:20px 10px;
					}
				}
				li.active{
					a{
						border-bottom:none;
					}
				}
			}
			#cart{
				text-align:center;
				float:none !important;
				.dropdown-toggle{
					float:none;
					text-align:center;
				}
			}
		}
		.site-logo{
			.site-title{
				text-align:center;
			}
		}
	}
	header#site-header.header-is-sticky{
		position:relative;
	}
	.search-form{
		width:80%;
		margin-left:10%;
	}
}

@media only screen and (min-width:400px) and (max-width:550px){
	header#site-header{
		.site-logo{
			text-align:center;

			img{
				width:70%;
			}

			.site-title{
				text-align:center;
			}
		}
	}
}

@media only screen and (min-width:550px) and (max-width:767px){
	header#site-header{
		.site-logo{
			text-align:center;

			img{
				width:50%;
			}

			.site-title{
				text-align:center;
			}
		}
	}
}