.site-header{
	padding: 22px 0;
	border-bottom: 4px solid #f4f4f4;
	// margin: 0 0 60px;

	&:after{
		content: '';
		display: block;
		clear: both;
	} /*after*/

	.site-branding{
		float: left;

		.custom-logo{
			display: inline-block;
			vertical-align: middle;
			margin-right: 15px;

			img{vertical-align: top;} /*img*/

		} /*custom-logo*/

		.text-logo{
			display: inline-block;
			vertical-align: middle;
		} /*text-logo*/

		.site-title{
			margin: 0;
			font-size: 2em;
			font-weight: 700;

			a{
				color: $secondary_color;
				@include transition(ease, 0.2s);

				&:hover,
				&:focus{
					text-decoration: none;
					color: $primary_color;
				} /*hover*/

			} /*a*/

		} /*site-title*/

		.site-description{
			font-size: 0.899em;
			margin: 0;
		} //site-description

	} /*site-branding*/

	.right{
		float: right;
		margin-top: 6px;

		.tools{
			float: right;
			border-left: 1px solid #d3d4d5;
			padding-left: 25px;
			margin-left: 25px;

			.btn-login{
				float: right;
				font-size: 0.722em;
				text-transform: uppercase;
				padding: 5px 27px;
				margin-left: 25px;
			} /*btn-login*/

			.cart{
				color: $secondary_color;
				float: right;
				margin-top: 5px;
				margin-left: 20px;
				position: relative;

				.count{
					font-size: 0.666em;
					font-weight: 700;
					color: $white_color;
					background: #c2c8ce;
					@include border-radius(50%);
					width: 20px;
					height: 20px;
					display: inline-block;
					text-align: center;
					line-height: 20px;
					vertical-align: top;
				} /*count*/

				@media only screen and (min-width: 1025px){
					&:hover .product-holder,
					&:focus .product-holder{display: block;}
				}

				.product-holder{
					font-weight: 400;
					position: absolute;
					top: 100%;
					right: -15px;
					width: 280px;
					display: none;
					color: #fff;
					padding-top: 10px;
					z-index: 1;

					&:before{
						width: 0;
						height: 0;
						border-left: 8px solid transparent;
						border-right: 8px solid transparent;
						border-bottom: 8px solid rgba(33, 39, 44, 0.95);
						position: absolute;
						content: '';
						top: 2px;
						right: 37px;
					} /*before*/

					.edd-cart-number-of-items{
						line-height: 1.857em;
						font-size: 0.7em;
						color: #fff;
						border-bottom: 1px solid #393e42;
						background: rgba(33, 39, 44, 0.95);
						padding: 10px 17px;
						margin: 0;
					} //edd-cart-number-of-items

					ul{
						margin: 0;
						padding: 0;
						list-style: none;
						line-height: 1.857em;
						font-size: 0.7em;
						font-weight: 700;

						li{
							border-bottom: 1px solid #393e42;
							background: rgba(33, 39, 44, 0.95);
							padding: 10px 17px;
							position: relative;

							.edd-cart-item-title{
								display: block;
								width: 90%;
							}

							.edd-cart-item-price{
								display: inline-block;
								font-weight: 400;
								margin-left: -3px;
								width: 90%;
							} /*price*/

							.edd-remove-from-cart{
								position: absolute;
								top: 17px;
								right: 20px;
								fill: #a2adb8;
								cursor: pointer;
								width: 12px;
								height: 15px;
								font-size: 0;

								&:after{
									background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a2adb8' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E") center center no-repeat;
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									content: '';
								} //after

							} /*svg close button*/

							.edd-cart-item-separator{
								display: none;
							}

							&.edd_checkout{
								padding: 0;
								background: none;
								border-bottom: 0;

								a{
									display: block;
									font-size: 1.08em;
									font-weight: 500;
									@include border-radius(0 0 5px 5px);
									text-align: center;
									padding: 8px 25px;
									background: $primary_color;
									border: 1px solid $primary_color;
									color: #fff;
									@include transition(ease, 0.2s);

									&:hover,
									&:focus{
										background: #fff;
										color: $primary_color;
										text-decoration: none;
									} //hover

								} //a

							} //edd_checkout

						} /*li*/

					} /*product-list*/

					.btn-checkout{
						display: block;
						font-size: 1.08em;
						font-weight: 500;
						@include border-radius(0 0 5px 5px);
						text-align: center;
						padding: 5px 25px;
						background: $primary_color;

						&:hover,
						&:focus{
							background: $white_color;
						} /*hover*/

					} /*btn-checkout*/

				} /*product-holder*/

				svg{
					cursor: pointer;
				} /*svg*/

			} /*cart*/

			.form-section{
				float: right;
				color: $secondary_color;
				margin-top: 7px;
				cursor: pointer;
				position: relative;

				.form-holder{
					position: absolute;
					top: -11px;
					right: -10px;
					width: 530px;
					height: 50px;
					z-index: 10;
					display: none;

					.search-form{
						width: 100%;
						background: $white_color;
						@include border-radius(4px);
						padding: 6px 15px 11px;

						label{
							width: 100%;
							display: inline-block;
						} /*label*/

						input[type="search"]{
							display: inline-block;
							width: 100%;
							padding: 0;
							margin: 0;
							border: 0;
							@include border-radius(0);
							font-size: 0.8em;
							color: #86919d;
						} /*input*/

						input[type="submit"]{display: none;}

					} /*search-form*/

					.btn-close-form{
						position: absolute;
						top: 9px;
						right: 15px;
						color: #86919d;

						svg{width: 12px;}
					}

				} /*form-holder*/

			} /*form-section*/

		} /*tools*/

	} /*right*/

} /*site-header*/

.overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	top: 0;
	left: 0;
	display: none;
	z-index: 5;
}

/* header with banner*/
.hasbanner{
	.header-holder{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}

	.site-header{
		border-bottom: 2px solid rgba(255, 255, 255, 0.2);

		.site-branding{

			.site-title{

				a{
					color: $white_color;
				} /*a*/

			} /*site-title*/

			.site-description{
				color: #fff;
			} //site-description

		} /*site-branding*/

		.right{

			.tools{
				border-left: 1px solid rgba(255, 255, 255, 0.2);

				.cart{
					color: $white_color;
					.count{
						background: #676a6e;
					} /**/

				} /*cart*/

				.form-section{color: $white_color;} /*form-section*/

			} /*tools*/

		} /*right*/

	} /*site-header*/

	.main-navigation > div > ul > li > a{
		color: rgba(255, 255, 255, 0.8);

		&:hover,
		&:focus{
			color: $white_color;
		}
	}

	.main-navigation > div > ul > .current-menu-item > a,
	.main-navigation > div > ul > .current-menu-ancestor > a,
	.main-navigation > div > ul > .current_page_item > a,
	.main-navigation > div > ul > .current_page_ancestor > a{
		color: $white_color;
	}

} /*hasbaner*/

@media only screen and (max-width: 1024px){
	.site-header{

		.site-branding{

			.site-title{font-size: 1.667em;} //site-title

		} //site-branding

		.right{

			.tools{
				border-left: 0;
				border-right: 1px solid #d3d4d5;
				padding-left: 0;
				padding-right: 25px;
				margin-left: 0;
				margin-right: 25px;

				.form-section{

					.form-holder{
						width: 280px;
					} //form-holder

				} //form-section

			} //tools

		} //right

	} //site-header

	.hasbanner{

		.site-header{

			.right{

				.tools{
					border-left: 0;
					border-right: 1px solid rgba(255, 255, 255, 0.2);
				} //tools

			} //right

		} //site-header

	} //hasbanner

} //media

@media only screen and (max-width: 767px){

	.site-header{

		.site-branding{
			float: none;
			display: block;
			width: 100%;
			text-align: center;
		} //site-branding

		.right{
			float: none;
			display: block;
			width: 100%;
			margin-top: 20px;

			&:after{
				content: '';
				display: block;
				clear: both;
			} //haslayout

			.tools{
				width: calc(100% - 41px);

				.cart{
					float: left;
					margin-left: 0;
					margin-right: 20px;

					.product-holder{
						right: auto;

						&:before{
							right: auto;
							left: 5px;
						} //before

					} //product-holder

				} //cart

				.form-section{
					float: left;

					.form-holder{
						right: auto;
						width: 210px;
					} //form-holder

				} //form-section

				.btn-login{
					text-transform: none;
					padding: 0 17px;
					margin-top: 4px;
				} //btn-login

			} //tools

		} //right

	} //site-header

	#toggle-button{
		margin-top: 12px;
	}

} //media