//HEADER
.header {
	z-index: 99;
	position: relative;
	@include media-breakpoint-up(xl) {
		z-index: initial;
	}

  	//MOBILE MENU
  	.nav{
	  	.mobile-menu-bar{
	  		width: 100%;
	  		background-color: transparent;
	  		height: 60px;
	  		display: flex;
	  		align-items: center;
	  		@include media-breakpoint-up(xl) {
  				display: none;
  			}
  			.mobile-logo{
  				flex: 1;
    			text-align: center;
  			}
	  		.mobile-menu-toggle{
	  			width: 70px;
	  			font-size: 14px;
	  			.icon-menu-20x20{
	  				font-size: 20px;
	  			}
	  			span{
	  				position: relative;
	  				top: -3px;
	  				padding-left: 4px;
	  			}
	  		}
	  		.mobile-logo-wrapper{
	  			text-align: center;
	  			flex: 1;
				line-height: 0;
	  			img{
	  				width: auto;
	  				max-height: 60px;
					padding: 10px 0;
	  			}
	  		}
	  		.mobile-icons-box{
	  			font-size: 1rem;
	  			width: 70px;
	  			text-align: right;
	  			.mobile-search-toggle{
	  				vertical-align: middle;
	  			}
	  			.mobile-cart{
	  				margin-left: 12px;
	  				position: relative;
	  				.items-count{
						position: absolute;
						font-size: 10px;
						left: 0;
						top: 4px;
						width: 100%;
						text-align: center;
						pointer-events: none;
	  				}
	  			}
	  		}
	  	}
	  	.menu{
	  		position: fixed;
	  		top: 0;
	  		bottom: 0;
	  		left: 0;
	  		right: 0;
	  		width: 100%;
	  		padding: 0 20px 60px 20px;
	  		overflow: auto;
	  		z-index: 102;
	  		overflow: hidden auto;
	  		transition: transform 0.2s;
	  		transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
	  		transform: translate3d(-100%, 0, 0);

	  		@include media-breakpoint-down(sm) {
				bottom: auto;
				height: 100vh;
				overflow-y: auto;
				overflow-x: hidden;
	  		}

	  		@include media-breakpoint-up(xl) {
	  			left: 0;
  				padding: 20px 20px 20px 100px;
  				right: auto;
  				width: 700px;
  				z-index: 102;
  				transition: transform 0.2s;
		  		transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
		  		transform: translate3d(-100%, 0, 0);
  			}

	  		&.active{
		    	transform: translate3d(0, 0, 0);
		    	transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
		    	transition: transform 0.2s;
		    	.menu-header,
			    .primary-menu,
			    .mobile-secondary-menu,
			    .mobile-menu-footer{
			    	opacity: 1;
			    	visibility: visible;
			    	transition-delay: 0.2s;
			    }
	  		}

	  		.scroll-container {
	  			@include media-breakpoint-up(xl) {
					overflow-y: auto;
					max-height: 100%;
					height: 100vh;
					padding-right: 32px;
					width: 100%;
					position: relative;
					box-sizing: content-box;
					overflow-x: hidden;
				}
			}

	  		.menu-header{
	  			margin-bottom: 40px;
	  			text-align: center;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;
				visibility: hidden;
				transition: all 0.2s ease-in-out;
	  			@include media-breakpoint-up(xl) {
	  				text-align: right;
	  				display: none;
	  			}
	  			.logo{
	  				@include media-breakpoint-up(xl) {
		  				display: none;
		  			}
		  		}
		  		.close-menu{
		  			position: absolute;
		  			right: 20px;
		  			top: 15px;
		  			font-size: 14px;
		  			@include media-breakpoint-up(xl) {
		  				display: none;
		  			}
		  		}
	  		}
	  		.primary-menu{
	  			color: #000000;
	  			font-size: 23px;
	  			line-height: 31px;
	  			list-style-type: none;
	  			margin-bottom: 15px;
	  			opacity: 0;
			    visibility: hidden;
			    transition: all 0.2s ease-in-out;
	  			@include media-breakpoint-up(xl) {
	  				font-size: 33px;
	  				margin-top: 170px;
	  				position: relative;
		  			width: calc(100% + 50px); /* push scrollbar out of container */
		  			height: 100%;
		  			max-height: calc(100vh - 257px); /* no scroll on smaller menus */
		  			overflow-y: scroll;
	  			}
	  			li{
	  				position: relative;
	  				.plus-minus{
		  				display: none;
		  			}

		  			a {
		  				max-width: 100%;
		  			}
	  			}
	  			> li{
	  				margin-bottom: 16px;
	  				position: relative;
	  				a{
	  					transition: 0.15s ease-in-out;
	  					display: inline;
	  					line-height: 1.6;
	  					position: relative;
	  					//background-image: linear-gradient(to top, rgb(0, 0, 0) 1px, rgb(0, 0, 0) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
					    background-repeat: no-repeat;
					    background-position: 0 100%;
					    background-size: 0 100%;
					    transition: background-size 0.2s ease-in-out;
					    &:hover{
					        background-size: 100% 100%;
					    }
	  				}
	  				@include media-breakpoint-up(xl) {
		  				width: 40%;
		  				position: static;
		  			}
		  			&.menu-item-has-children{
		  				&.active{
		  					.plus-minus{
		  						&:after{
			  						display: none;
			  					}
		  					}
		  				}
		  				.plus-minus{
		  					display: inline-block;
						    width: 15px;
						    height: 15px;
						    margin-left: auto;
						    position: relative;
						    float: right;
						    position: absolute;
						    right: 0;
						    top: 13px;
						    @include media-breakpoint-up(xl) {
				  				display: none;
				  			}
		  					&:before{
								content: "";
								display: block;
								position: absolute;
								right: 0;
								width: 15px;
								height: 1px;
								background-color: #000;
								top: 7px;
								@include media-breakpoint-up(xl) {
					  				display: none;
					  			}
			  				}
			  				&:after{
								content: "";
								display: block;
								position: absolute;
								right: 7px;
								top: 0;
								width: 1px;
								height: 15px;
								transition: all 0.2s ease-in-out;
								background-color: #000;
								@include media-breakpoint-up(xl) {
					  				display: none;
					  			}
			  				}
		  				}
		  			}
	  				> a{
	  					display: inline;
						z-index: 2;
						position: relative;
	  				}
	  				> .sub-menu{
	  					background-color: rgba(0,0,0,0.03);
	  					padding: 15px 20px;
	  					margin-left: -20px;
	  					margin-right: -20px;
	  					display: none;
	  					list-style-type: none;
	  					max-width: none;
	  					@include media-breakpoint-up(xl) {
						    top: 0;
						    left: 50%;
						    width: 45%;
						    position: absolute;
						    background: none;
						    padding: 0;
						    background-color: none;
						    margin-left: -40px;
					    }
	  					> li{
							color: #000000;
							font-size: 0.9rem;
							line-height: 1.4rem;
							margin-bottom: 10px;
	  						&:last-child{
	  							margin-bottom: 0;
	  						}
	  						.plus-minus{
				  				display: none;
				  			}
	  						> ul{
	  							padding: 15px 0px 5px;
	  							list-style: none;
	  							li{
									color: #888888;
									font-size: 14px;
									line-height: 17px;
									margin-bottom: 10px;
									a{
										@include media-breakpoint-up(xl){
											background-image: linear-gradient(to top, rgb(136, 136, 136) 1px, rgb(136, 136, 136) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
										}

										sup {
											display: inline-block;
											margin-top: -4px;
											margin-left: 3px;
										}
									}
									.plus-minus{
						  				display: none;
						  			}
	  							}
	  						}
	  					}
	  				}
	  			}
	  		}

	  		.mobile-secondary-menu{
	  			color: #000000;
	  			font-size: 16px;
	  			line-height: 25px;
	  			margin-left: -20px;
	  			margin-right: -20px;
	  			padding: 20px;
	  			border-top: 1px solid #DDDDDD;
	  			margin-top: 6px;
	  			list-style-type: none;
	  			max-width: none;
	  			opacity: 0;
	  			visibility: hidden;
	  			transition: all 0.2s ease-in-out;
	  			li{
	  				margin-bottom: 6px;
	  			}
	  			@include media-breakpoint-up(xl) {
	  				display: none;
	  			}
	  		}
	  	}

  		.mobile-menu-footer{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20px;
			display: flex;
			width: 100%;
			justify-content: space-between;
			background: transparent;
			align-items: center;
			z-index: 999;
			transition: transform 0.2s;
	  		transition-timing-function: cubic-bezier(0.8, 0, 0.26, 1);
	  		transform: translate3d(-100%, 0, 0);
			@include media-breakpoint-up(xl) {
  				display: none;
  			}

  			> * {
				opacity: 0;
				visibility: hidden;
				transition: all 0.2s ease-in-out;
  			}
			.mobile-social-icons{
				a{
					margin-left: 25px;
					font-size: 20px;
				}
			}
			.mobile-my-account{
				font-size: 16px;
			}
  		}

  		.menu.active + .mobile-menu-footer{
			transform: translate3d(0, 0, 0);
	    	transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
	    	transition: transform 0.2s;

	    	> * {
				opacity: 1;
				visibility: visible;
				transition-delay: 0.2s;
	    	}
		}

	  	//DESKTOP MENU
	  	.vertical-menu{
	  		display: none;
	  		@include media-breakpoint-up(xl) {
	  			display: block;
	  			.left-menu-bar{
		  			position: fixed;
				    bottom: 0;
				    transform-origin: top left;
				    transform: translateY(100%) rotate(-90deg);
				    display: flex;
				    align-items: center;
				    width: 100vh;
				    padding: 0 40px 0px 40px;
				    height: 100px;
				    left: 0;
				    z-index: 103;
				    .toggle-menu{
				    	display: flex;
				    	align-items: center;
				    	position: relative;
				    	cursor: pointer;
				    	@include media-breakpoint-up(xl){
				    		justify-self: flex-end;
    						margin-left: auto;
				    		transition: 0.2s ease-in-out;
					    	&:hover{
					    		opacity: 0.5;
					    	}
				    	}
				    	span{
				    		padding-right: 10px;
				    		font-size: 16px;
				    	}
				    	.icon-menu-20x20{
				    		font-size: 20px;
				    		transform: rotate(-90deg);
				    		transition: all 0.2s ease-in-out;
				    		right: 0;
				    		cursor: pointer;
				    	}
				    	.icon-close-20x20{
				    		font-size: 20px;
				    		transition: all 0.2s ease-in-out;
				    		right: 0;
				    		cursor: pointer;

							+ .icon-pulsating-ring {
								opacity: 0;
							}
				    	}
						.icon-pulsating-ring {
						    position: absolute;
							opacity: 1;
							top: 14px;
							right: -4px;
							left: auto;
							width: 14px;
						    height: 14px;
							transition: all 0.2s ease-in-out;
						}

						.pulse-circle {
							background-color: #F0D68D;
							border-radius: 50%;
						    width: 14px;
						    height: 14px;
							position: relative;
						}

						.pulse-ring {
							animation: pulsate 1s ease-out;
							animation-iteration-count: infinite;
							border-width: 2px;
							border-style: solid;
							border-color: #F0D68D;
							border-radius: 30px;
							height: 24px;
							width: 24px;
							opacity: 0;
							position: absolute;
							top: -5px;
							right: -5px;
							left: auto;
						}
				    }
				    .secondary-menu{
				    	display: initial;
				    	font-size: 16px;
				    	margin: 0;
				    	max-width: 80%;
				    	li{
				    		display: inline-block;
				    		padding-right: 20px;
				    		a{
				    			position: relative;
								background-image: linear-gradient(to top, rgb(0, 0, 0) 1px, rgb(0, 0, 0) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
								background-repeat: no-repeat;
								background-position: 0 100%;
								background-size: 0 100%;
								transition: background-size 0.2s ease-in-out;
								background-color: transparent;
								&:hover{
								background-size: 100% 100%;
								}
				    		}
				    	}
				    }
		  		}
		  		.top-bar{
		  			height: 150px;
				    align-items: center;
				    justify-content: center;
				    display: flex;
					.custom-logo-link{
						.custom-logo{
							display: block;
							min-width: 20px;
							width: auto;
						}
					}
		  		}
		  		.right-menu-bar{
		  			position: fixed;
				    bottom: 0;
				    transform-origin: top right;
				    transform: translateY(100%) rotate(90deg);
				    display: flex;
				    align-items: center;
				    justify-content: space-between;
				    width: 100vh;
				    font-size: 20px;
				    padding: 0 40px 0 40px;
				    height: 100px;
				    right: 0;
				    z-index: 1;
				    .menu-icons{
				    	display: flex;
				    	> span,a{
				    		display: inline-block;
				    		transform: rotate(-90deg);
				    		margin-right: 25px;
				    		cursor: pointer;
				    		@include media-breakpoint-up(xl){
					    		transition: 0.2s ease-in-out;
						    	&:hover{
						    		opacity: 0.5;
						    	}
					    	}
				    		i{
				    			display: block;
				    		}
				    	}
				    	.show-cart{
				    		.items-count{
					    		position: absolute;
							    font-size: 10px;
							    left: 0;
							    top: 5px;
							    width: 100%;
							    text-align: center;
							    pointer-events: none;
					    	}
				    	}
						.wishlist-link{
							i{
								font-size: 18px;
							}
						}
				    }

				    .menu-icons-bottom{
				    	display: flex;
				    	> span,a{
				    		display: inline-block;
				    		transform: rotate(-90deg);
				    		margin-left: 25px;
				    		cursor: pointer;
				    		@include media-breakpoint-up(xl){
					    		transition: 0.2s ease-in-out;
						    	&:hover{
						    		opacity: 0.5;
						    	}
					    	}
				    		i{
				    			display: block;
				    		}
				    	}
				    	.scroll-top {
				    		opacity: 0;
				    		visibility: hidden;
				    		&.visible {
				    			visibility: visible;
				    			opacity: 1;

				    			&:hover {
				    				opacity: .5;
				    			}
				    		}
				    	}
					}
		  		}
	  		}
	  	}
  	}

  	//SEARCH
  	.search-box{
  		position: fixed;
  		top: 0;
  		bottom: 0;
  		right: 0;
  		left: 0;
  		width: 100%;
  		background-color: #fff;
  		padding: 0px 20px 20px;
  		overflow: auto;
	    transform: translate3d(100%, 0, 0);
	    transition: transform 0.2s;
	    transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
  		z-index: 2;
  		@include media-breakpoint-up(xl) {
  			width: 650px;
  			left: auto;
  			z-index: 2;
  			padding: 100px 120px;
  		}
  		&.active{
  			transform: translate3d(0, 0, 0);
		    transition: transform 0.2s;
		    transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
		    .canvas-wrapper{
		    	opacity: 1;
		    	visibility: visible;
		    	transition-delay: 0.2s;
		    	@include media-breakpoint-up(xl) {
		  			min-width: 410px;
		  		}
		    }
  		}
  		.close-search{
  			position: absolute;
  			right: 20px;
  			top: 15px;
  			font-size: 14px;
  			@include media-breakpoint-up(xl) {
  				right: 45px;
  				top: 45px;
  			}
  		}
  		.canvas-wrapper{
  			opacity: 0;
  			visibility: hidden;
  			transition: all 0.2s ease-in-out;
  		}
  		.search-header{
  			margin-bottom: 40px;
  			text-align: center;
  			height: 60px;
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			@include media-breakpoint-up(xl){
  				height: 0;
  				margin: 0;
  			}
  			.logo{
	  			@include media-breakpoint-up(xl) {
	  				display: none;
	  			}
	  		}
  		}
  		.search-wrapper{
  			.search-form{
  				margin-bottom: 32px;
  				position: relative;
  				z-index: 1;

  				label{
  					float: left;
  					border: none;
  					background-size: 0 100%;
  					width: 100%;
  					overflow: hidden;
  					display: flex;
  					padding: 0;
  					transition: 0.2s ease-in-out;
  					background-repeat: no-repeat;
				    background-position: 0 100%;
				    background-size: 0 100%;
  					.search-field{
	  					font-size: 1.375rem;
	  					line-height: 1.9rem;
	  					border: none;
	  					flex: 1;
	  					outline: none;
	  					width: 100%;
	  					margin-bottom: 0;
	  					box-shadow: none;
	  					padding: 10px 40px 10px 0;
	  					background-size: 0;
	  					overflow: hidden;
						-webkit-appearance: none;
	  					&:hover{
	  						background-size: 0;
	  					}
	  					&::-webkit-search-decoration,
						&::-webkit-search-cancel-button,
						&::-webkit-search-results-button,
						&::-webkit-search-results-decoration {
						  display: none;
						}
  					}
  					.submit-form{
  						border: none;
  						background: none;
  						padding: 0;
  						font-size: 17.14px;
  						outline: none;
  						cursor: pointer;
  						color: #000;
  						position: relative;
  						overflow: visible;
  						&.loading{
  							&:before{
  								content: '';
							    background: #000;
							    border-radius: 100%;
							    height: 20px;
							    width: 20px;
							    position: absolute;
							    left: -35px;
							    top: 19px;
							    animation: pulsate 1s ease-out;
							    animation-iteration-count: infinite;
    							opacity: 0.0;
  							}
  						}
  					}

  					&:hover,
  					&:focus,
  					&:active {
  						background-size: 100% 100%;
  					}
  				}
  			}
  			.search-results{
  				position: relative;
  				padding-top: 100px;
  				 .vertical-title{
  				 	display: none;
  					@include media-breakpoint-up(xl) {
  						display: block;
						position: absolute;
						transform-origin: top left;
						transform: rotate(-90deg);
						height: auto;
						text-transform: uppercase;
						font-size: 13px;
						left: -40px;
						width: 120px;
						text-align: right;
						margin-top: 120px;
			  		}
  				}
  				.view-all{
  					font-size: 18px;
  					line-height: 28px;
  					margin-top: 40px;
  					display: table;
					background-image: linear-gradient(to top, rgb(0, 0, 0) 1px, rgb(0, 0, 0) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
				    background-repeat: no-repeat;
				    background-position: 0 100%;
				    background-size: 100% 100%;
				    transition: background-size 0.2s ease-in-out;
					&:hover{
						background-size: 0% 100%;
					}
  				}
  				.item{
  					display: flex;
  					margin-bottom: 16px;
  					width: 100%;

   					.product-feature-img{
  						display: inline-block;
  						margin-right: 16px;
  						img{
  							width: 96px;
  							height: 96px;
  							min-width: 96px;
  							display: block;
  							min-height: 96px;
							transition: opacity 0.2s ease-in-out;
							backface-visibility: hidden;
							object-fit: cover;
  							&:hover{
  								opacity: 0.5;
  							}
  						}
  					}
  					.product-info{
  						flex: 1;
  						.small-heading-6{
  							a{
  								display: inline;
								background-image: linear-gradient(to top, rgb(0, 0, 0) 1px, rgb(0, 0, 0) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
							    background-repeat: no-repeat;
							    background-position: 0 100%;
							    background-size: 0 100%;
							    transition: background-size 0.2s ease-in-out;
							    background-color: transparent;
								&:hover{
									background-size: 100% 100%;
								}
  							}
  						}
  					}
  				}
  			}
  		}
  		.no-woocommerce-search{
  			.search-form{
  				display: flex;
  				margin-bottom: 32px;
  				// border-bottom: 1px solid #000;
  				position: relative;
				&:before{
					font-size: 17.14px;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					position: absolute;
					transition: 0.2s ease-in-out;
					 font-family: '#{$icomoon-font-family}';
					content: $blockshop-search-20x20;
				}
  				.screen-reader-text{
  					display: none;
  				}
  				.search-submit{
					margin-bottom: 0;
					margin-left: 10px;
					font-size: 0;
					background: none;
					padding: 0;
					width: 30px;
					z-index: 1;
					position: absolute;
					right: 0;
					top: 0;
				}
  			}
  		}
  	}
  	//CART
  	.shopping-cart{
  		display: none;
  		.widgettitle {
  			display: none;
  		}
  		@include media-breakpoint-up(xl) {
  			display: block;
  			width: 650px;
    		position: fixed;
		    top: 0;
		    bottom: 0;
		    right: 0;
		    background-color: #fff;
		    padding: 120px 100px 60px 100px;
		    overflow: auto;
		    z-index: 101;
		    transform: translate3d(100%, 0, 0);
		    transition: transform 0.2s;
		    transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
		    &.active{
			    transform: translate3d(0, 0, 0);
			    transition: transform 0.2s;
			    transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
			    .canvas-wrapper{
			    	opacity: 1;
			    	visibility: visible;
			    	transition-delay: 0.2s;
			    }
	  		}
	  		.canvas-wrapper{
	  			opacity: 0;
	  			visibility: hidden;
	  			transition: all 0.2s ease-in-out;
	  		}
		    .woocommerce-mini-cart__empty-message{
		    	font-size: 1.65rem;
		    	line-height: 2.3rem;
		    	text-align: center;
		    	max-width: 265px;
		    	margin: 0 auto;
		    }
	  		.close-cart{
	  			position: absolute;
	  			right: 45px;
	  			top: 45px;
	  			font-size: 14px;
	  			display: inline-block;
	  		}
	  		.vertical-title{
	  			position: absolute;
			    bottom: 0;
			    transform-origin: top left;
			    transform: rotate(-90deg) translate(-100%,0);
			    left: 80px;
			    bottom: auto;
			    font-size: 13px;
			    text-align: right;
			    text-transform: uppercase;
	  		}
	  		.cart_list{
	  			margin-bottom: 200px;
    			height: 100%;
    			position: relative;
    			max-height: calc(100vh - 420px );
    			overflow-y: auto;
    			list-style-type: none;

	  			.mini_cart_item{
					padding: 0 20px 0 132px;
					&:hover{
						.remove_from_cart_button{
							opacity: 1;
							visibility: visible;
						}
					}
					.blockUI{
			  			background-color: #fff !important;
			  		}
					.remove_from_cart_button{
						font-size: 0;
						height: auto;
						position: absolute;
						right: 10px;
    					top: 3px;
						opacity: 0;
						visibility: hidden;
						-webkit-transition: 0.2s ease-in-out;
						-o-transition: 0.2s ease-in-out;
						transition: 0.2s ease-in-out;
						&:before{
							content: '\e921';
							 font-family: '#{$icomoon-font-family}';
							font-size: 10px;
							color: #000;
							transition: 0.2s ease-in-out;
							cursor: pointer;
							display: inline-block;
							color: #888888;
						}
						&:hover{
							&:before{
								-webkit-transform: rotate(-90deg);
								-ms-transform: rotate(-90deg);
								transform: rotate(-90deg);
								color: #000;
							}
						}
					}
					.quantity{
						font-size: 16px;
						margin-top: 10px;
						display: block;
					}
					.variation{
						display: block;
						width: 100%;
						margin: 0;
					}
				}
	  		}
			.woocommerce-mini-cart__total{
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				margin-bottom: 16px;
				position: absolute;
				left: 120px;
				right: 100px;
				bottom: 205px;
				> strong{
					color: #888888;
					font-size: 15px;
					font-weight: normal;
				}
				.woocommerce-Price-amount{
					color: #000;
					font-size: 1.375rem;
				}
			}
			.woocommerce-mini-cart__buttons{
				display: flex;
				flex-wrap: wrap;
				position: absolute;
				left: 120px;
				right: 100px;
				bottom: 53px;

				&.wcppec-cart-widget-spb {
					bottom: 0;
				}
				a:first-child{
					font-size: 0.9rem;
					padding: inherit;
					display: table;
					margin-left: auto;
					margin-right: auto;
					margin-top: 24px;
    				margin-bottom: 18px;
					order: 2;
					position: relative;
	                line-height: 1.23;
	                background-color: inherit;
	                color: inherit;
	                background-image: linear-gradient(to top, rgb(0, 0, 0) 1px, rgb(0, 0, 0) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
	                background-repeat: no-repeat;
	                background-position: 0 100%;
	                background-size: 100% 100%;
	                transition: background-size 0.2s ease-in-out;
	                &:hover{
	                    background-size: 0 100%;
	                }
				}
				a:last-child{
					font-size: 0.9rem;
					background-color: #000;
					width: 100%;
					text-align: center;
					padding: 18px 0;
					display: block;
					color: #fff;
					transition: 0.2s ease-in-out;
					&:hover{
						opacity: 0.8;
					}
				}
			}
  		}
  	}
  	//LOGIN CANVAS
  	.account-cont{
  		display: none;
  		@include media-breakpoint-up(xl) {
  			display: block;
  			width: 650px;
    		position: fixed;
		    top: 0;
		    bottom: 0;
		    right: 0;
		    background-color: #fff;
		    padding: 120px 100px 60px 100px;
		    overflow: auto;
		    transform: translate3d(100%, 0, 0);
		    transition: transform 0.2s;
		    transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
		    // z-index: 2;
		    &.active{
		    	transform: translate3d(0, 0, 0);
			    transition: transform 0.2s;
			    transition-timing-function: cubic-bezier(0.2, 0, 0.26, 1);
			    .canvas-wrapper{
			    	opacity: 1;
			    	visibility: visible;
			    	transition-delay: 0.2s;
			    }
	  		}
	  		.canvas-wrapper{
	  			opacity: 0;
	  			visibility: hidden;
	  			transition: all 0.2s ease-in-out;
	  		}
		    .close-account{
		    	position: absolute;
				right: 45px;
				top: 45px;
				font-size: 13.5px;
		    }
		    .account-wrapper{
		    	position: relative;
		    	.woocommerce-error{
		    		li{
		    			padding: 0 15px;
		    			font-size: 0.9rem;
		    		}
		    	}
		    }
  		}
  	}

  	.offcanvas {
  		z-index:102;
  	}
}
.header{
	.mobile-logo{
		display: inline-block;
		@include media-breakpoint-up(xl){
			display: none;
		}
		a{
			display: block;
			line-height: 0;
		}
		img{
			width: auto;
			max-height: 60px;
			max-width: 190px;
			@include media-breakpoint-down(xs){
			max-width: 110px;
		    padding: 10px 0;
		}
		}
		span{
			font-size: 1rem;
			text-transform: uppercase;
		}
	}
	@include media-breakpoint-up(xl){
		.logo{
			display: inline-block;
			img{
				width: 198px;
			}
			span{
				font-size: 1.4rem;
				text-transform: uppercase;
			}
		}
	}
}
//SHOP NAVIGATION
.shop-categories{
	margin: 32px auto 32px auto;
	order: 1;
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
	@include media-breakpoint-up(xl){
		margin: 0 auto 64px auto;
		order: initial;
		width: auto;
	}
	.widgettitle{
		display: none;
	}
	.shop-list{
		margin: 0;
		max-width: 100%;
		@include media-breakpoint-up(xl){
			padding: 0;
		}
		.cat-item{
			display: inline-block;
			padding: 0 6px;
			position: relative;
			margin: 0 0 10px 0;
			@include media-breakpoint-up(xl){
				margin: 0 0 16px 0;
				padding: 0 16px;
				&:after{
					content: '';
				    background-color: #DDDDDD;
				    width: 1px;
				    height: 30px;
				    transform: rotate(25deg) translateY(-50%);
				    display: inline-block;
				    position: absolute;
				    right: 3px;
				    top: 50%;

				}
				&:last-child{
					&:after{
						display: none;
					}
				}
			}
			a{
				font-size: 1rem;
				background-image: linear-gradient(to top, rgb(0, 0, 0) 1px, rgb(0, 0, 0) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 1px);
			    background-repeat: no-repeat;
			    background-position: 0 100%;
			    background-size: 0 100%;
			    transition: background-size 0.2s ease-in-out;
			    &:hover{
			        background-size: 100% 100%;
			    }
				@include media-breakpoint-up(xl){
					position: relative;
					font-size: 1.375rem;
				}
			}
			.count{
				color: #888888;
				vertical-align: top;
				font-size: 14px;
				display: none;
			}
			&.current-cat{
				a{
					background-size: 100% 100%;
					&:hover{
						background-size: 0 100%;
					}
				}
				.count{
					display: inline-block;
				}
				h1 {
					font-size: 0;
					margin-bottom: 0;
				}
			}
		}

		+ .widget_layered_nav_filters{
			padding-top: 20px;
			@include media-breakpoint-up(xl){
				padding: 0;
			}
		}
	}
	.widget_layered_nav_filters{
		margin-bottom: 0;
		padding: 0;
		width: 100%;
		ul{
			text-align: center;
		}
	}
}

body.transparent_header {
	@include media-breakpoint-up(xl){
		header#masthead  {
			position: absolute;
			left: 0;
			width: 100%;
			z-index: 101;

			.top-bar,
			.right-menu-bar {
				z-index: 2;
			}
		}
	}
}

.header .logo {
	text-align: center;

	span.tagline {
		display: none;
		@include media-breakpoint-up(xl) {
			display: block;
			font-size: 13px;
		}
	}
}

@keyframes pulsate {
    0% {
		opacity: 0;
		transform: scale(0.1, 0.1);
	}
    50% {
		opacity: 1;
	}
    100% {
		transform: scale(1.2, 1.2);
		opacity: 0;
	}
}
