// Yolo Header Mobile
@media screen and (min-width: 992px) {
	header.yolo-mobile-header {
		display: none!important;
	}
}
@media screen and (max-width: 991px) {
	body {
		.transition(all 0.3s);
		position: relative;
		left: 0;
	}
	.mobile-top-bar-hide,
	header.yolo-main-header {
		display: none!important;
	}

	body.menu-mobile-in {
		left: 280px;
		overflow: hidden;
	}
	.container.yolo-mobile-header-wrapper {
		position: relative;
	}
	.header-mobile-before {
		text-align: center;

		img {
			max-height: @logo_mobile_max_height;
			padding-top: @logo_mobile_padding;
			padding-bottom: @logo_mobile_padding;
			.box-sizing(content-box);
		}
	}

	.header-logo-mobile {
		line-height: @logo_mobile_max_height;
		vertical-align: middle;
		text-align: center;
		img {
			max-height: @logo_mobile_max_height;
			padding-top: @logo_mobile_padding;
			padding-bottom: @logo_mobile_padding;
			.box-sizing(border-box);
		}
	}

	header.yolo-mobile-header {
		background: @white;
		.header-left,
		.toggle-icon-wrapper.toggle-desktop,
		.header-customize{
			display: none;
		}
		.yolo-header-container-wrapper {
			.transition(all 0.3s ease);
			background-color: @white;
			z-index: 997;
			top: 0;
			border-bottom: solid 1px @border_color;
		}
		.yolo-mobile-header-wrapper {
			background-color: @white;
		}
		.yolo-mobile-header-inner {
			height: @logo_mobile_max_height;
			position: relative;

			.header-customize{
				display: block;
				font-size: 0;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				right: 0;
				color: #000;

				&:before {
					content: "";
					display: inline-block;
					vertical-align: middle;
					height: 100%;
				}
			}
			.header-customize-item {
				font-size: 14px;
				display: inline-block;
				vertical-align: middle;
			}

			.header-customize-item + .header-customize-item {
				margin-left: 10px;
			}

			.toggle-icon-wrapper {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
			}

			.icon-search-menu {
				display: inline-block;
				vertical-align: middle;
				// border: solid 2px @border_color;
				color: @text_color;
				height: 45px;
				width: 45px;
				text-align: center;
				line-height: 45px;
				padding: 0;
				font-size: 24px;
				.transition( all 0.35s ease);
				&:hover{
					color: @primary_color;
				}
			}
		}

		.shopping-cart-wrapper .widget_shopping_cart_content {
			height: @logo_mobile_max_height;
			&:before {
				content: "";
				height: 100%;
				display: inline-block;
				vertical-align: middle;
			}
		}
		.shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon {
			display: inline-block;
			vertical-align: middle;
			top: 0;
			height: 45px;
			line-height: 45px;
		}
		.shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > i.wicon {
			display: inline-block;
			// border: solid 2px #222;
			height: 45px;
			width: 45px;
			text-align: center;
			line-height: 45px;
			padding: 0;
			font-size: 24px;
			color: @text_color;

			+ span {
				position: absolute;
				top: 5px;
				right: 0px;
				color: @white;
				background-color: @primary_color;
				border-radius: 100%;
				padding: 0;
				width: 17px;
				height: 17px;
				line-height: 17px;
			}
		}
	}

	.yolo-mobile-header-nav {
		background: #333;
		display: none;
		margin-bottom: 15px;
	}

	form.yolo-search-form-mobile-menu {
		display: none;
	}
	.yolo-mobile-header-nav.menu-drop-fly {
		display: block;
		position: fixed;
		margin: 0;
		top: 0;
		bottom: 0;
		overflow: auto;
		overflow-x: hidden;
		width: 280px;
		left: -280px;
		border-right: solid 2px @primary_color;
		z-index: 9999;
		.transition(all 0.3s);

		&.in {
			left: 0;
		}
		form.yolo-search-form-mobile-menu {
			display: block;
			background-color: #222;
			padding: 15px;
			position: relative;
			input {
				background-color: #333;
				border: none;
				display: block;
				width: 100%;
				font-size: 14px;
				line-height: 1.2;
				height: auto;
				padding: 12px;
				color: @white;
			}

			button {
				border: none;
				background-color: transparent;
				position: absolute;
				top: 0;
				right: 20px;
				line-height: 1;
				bottom: 0;
				margin: auto;
				font-size: 14px;
				color: @white;
			}
		}
		ul.yolo-nav-mobile-menu {
			padding: 0;
			li.menu-item {
				font-size: 12px;
				color: @white;
				border-bottom: 1px solid fade(@white, 12%);
				letter-spacing: 0.1em;
				font-weight: bold;
				position: relative;
				.transition(all 0.2s ease-in-out);
				> a {
					padding: 15px;
					display: inline-block;
					text-transform: uppercase;
					color: @white;
					line-height: 1.2;
					&:hover {
						color: @primary_color;
					}
				}
				> b.menu-caret {
					color: @white;
					float: right;
					right: 0;
					position: absolute;
					.transition(all 0.3s ease-in-out 0s);
					&:before {
						content: "\f065";
						display: inline-block;
						font-family: FontAwesome;
						text-align: center;
						line-height: 45px;
						width: 45px;
					}
					&:hover {
						cursor: pointer;
						color: @primary_color;
						.rotate(360deg);
					}
					&.active {
						&:before {
							content: "\f066";
							display: inline-block;
							font-family: FontAwesome;
						}
					}
				}
				&:not(.sub-menu-open):hover {
					background-color: lighten(#333, 5%);
				}
				&.sub-menu-open {
					border-bottom-width: 0px;
					> ul.sub-menu:before {
						content: "";
						display: block;
						position: absolute;
						top: -6px;
						left: 15px;
						z-index: 1;
						border-style: solid;
						border-width: 0 6px 6px 6px;
						border-color: transparent transparent lighten(#333, 10%);;
					}
				}
			}
			li.current-menu-ancestor > a,
			li.current-menu-parent > a,
			li.current-menu-item > a,
			li.menu-current > a,
			li > a:hover,
			li:hover > a,
			li ul.sub-menu li:hover > a {
				color: @primary_color;

				> b.caret:before {
					color: @primary_color;
				}
			}

			ul.sub-menu {
				background-color: lighten(#333, 10%);
				padding-left: 0;
				position: relative;

				> li.menu-item > a {
					font-size: 10px;
				}

				> li.menu-item.sub-menu-open > ul.sub-menu:before {
					border-color: transparent transparent lighten(#333, 15%);
				}
			}

			ul ul.sub-menu {
				background-color: lighten(#333, 15%);
				> li.menu-item.sub-menu-open > ul.sub-menu:before {
					border-color: transparent transparent lighten(#333,15%);
				}
			}

			ul ul ul.sub-menu {
				background-color: lighten(#333, 20%);
				> li.menu-item.sub-menu-open > ul.sub-menu:before {
					border-color: transparent transparent lighten(#333, 20%);
				}
			}
			ul ul ul ul.sub-menu {
				background-color: lighten(#333, 25%);
			}
		}
	}
	.yolo-mobile-header-nav.menu-drop-dropdown {
		form.yolo-search-form-mobile-menu {
			display: block;
			background-color: #222;
			padding: 15px;
			position: relative;
			display: none;
			input {
				background-color: #333;
				border: none;
				display: block;
				width: 100%;
				font-size: 14px;
				line-height: 1.2;
				height: auto;
				padding: 12px;
				color: @white;
			}

			button {
				border: none;
				background-color: transparent;
				position: absolute;
				top: 0;
				right: 20px;
				line-height: 1;
				bottom: 0;
				margin: auto;
				font-size: 14px;
				color: @white;
			}
		}
		ul.yolo-nav-mobile-menu {
			padding: 15px;
			li.menu-item {
				font-size: 12px;
				color: @white;
				border-bottom: 1px solid fade(@white, 12%);
				letter-spacing: 0.1em;
				font-weight: bold;
				position: relative;
				.transition(all 0.2s ease-in-out);
				> a {
					padding: 15px;
					display: inline-block;
					text-transform: uppercase;
					color: @white;
					line-height: 1.2;
					&:hover {
						color: @primary_color;
					}
				}
				> b.menu-caret {
					color: @white;
					float: right;
					right: 0;
					position: absolute;
					.transition(all 0.3s ease-in-out 0s);
					&:before {
						content: "\f065";
						display: inline-block;
						font-family: FontAwesome;
						text-align: center;
						line-height: 45px;
						width: 45px;
					}
					&:hover {
						cursor: pointer;
						color: @primary_color;
						.rotate(360deg);
					}
					&.active {
						&:before {
							content: "\f066";
							display: inline-block;
							font-family: FontAwesome;
						}
					}
				}
				&:not(.sub-menu-open):hover {
					background-color: lighten(#333, 5%);
				}
				&.sub-menu-open {
					border-bottom-width: 0px;
					> ul.sub-menu:before {
						content: "";
						display: block;
						position: absolute;
						top: -6px;
						left: 15px;
						z-index: 1;
						border-style: solid;
						border-width: 0 6px 6px 6px;
						border-color: transparent transparent lighten(#333, 10%);;
					}
				}
			}
			li.current-menu-ancestor > a,
			li.current-menu-parent > a,
			li.current-menu-item > a,
			li.menu-current > a,
			li > a:hover,
			li:hover > a,
			li ul.sub-menu li:hover > a {
				color: @primary_color;

				> b.caret:before {
					color: @primary_color;
				}
			}

			ul.sub-menu {
				background-color: lighten(#333, 10%);
				padding-left: 20px;
				position: relative;

				> li.menu-item > a {
					font-size: 10px;
				}

				> li.menu-item.sub-menu-open > ul.sub-menu:before {
					border-color: transparent transparent lighten(#333, 15%);
				}
			}

			ul ul.sub-menu {
				background-color: lighten(#333, 15%);
				> li.menu-item.sub-menu-open > ul.sub-menu:before {
					border-color: transparent transparent lighten(#333,15%);
				}
			}

			ul ul ul.sub-menu {
				background-color: lighten(#333, 20%);
				> li.menu-item.sub-menu-open > ul.sub-menu:before {
					border-color: transparent transparent lighten(#333, 20%);
				}
			}
			ul ul ul ul.sub-menu {
				background-color: lighten(#333, 25%);
			}
		}
	}

	// HEADER MOBILE 2
	header.header-mobile-2 {
		display: block;
		.yolo-header-container-wrapper {
			background-color: #333;
			border-bottom: none;
		}
		.yolo-mobile-header-wrapper {
			background-color: transparent;

		}
		.yolo-mobile-header-inner {
			height: @main_menu_mobile_height;
			position: relative;
			.header-customize {
				color:@border_color;
				right: 0;
			}
			.icon-search-menu,
			.shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > i.wicon {
				height: 30px;
				line-height: 32px;
				width: 36px;
				color: @white;

				&:before {
					line-height: 28px;
				}
			}
			.shopping-cart-wrapper .widget_shopping_cart_content {
				height: @main_menu_mobile_height;
			}
			.toggle-icon-wrapper {
				left: 0;
			}
			.toggle-icon-wrapper .toggle-icon > span,
			.toggle-icon-wrapper .toggle-icon:before,
			.toggle-icon-wrapper .toggle-icon:after{
				background-color:@border_color;
			}

			.toggle-icon-wrapper.in .toggle-icon > span {
				background-color: transparent;
			}
			.toggle-icon-wrapper .toggle-icon + span {
				font-family: Oswald;
				font-size: 18px;
				display: inline-block;
				vertical-align: middle;
				text-transform: uppercase;
				color: @border_color;
				font-weight: 300;
			}
		}
	}


	// HEADER MOBILE 3
	header.header-mobile-3 {
		.header-logo-mobile {
			text-align: right;
		}
		.yolo-mobile-header-inner .header-customize {
			left: 50px;
			right: auto;
		}
		.shopping-cart-wrapper {
			position: static;
			.widget_shopping_cart_content .cart_list_wrapper {
				left: -45px;
				right: auto;
			}
		}

	}

	// HEADER MOBILE 4
	header.header-mobile-4 {
		.header-logo-mobile {
			text-align: left;
		}
		.yolo-mobile-header-inner .toggle-icon-wrapper {
			right: 0px;
			left: auto;

		}
		.yolo-mobile-header-wrapper .header-customize {
			right: 50px;
			left: auto;
		}
	}

    // HEADER MOBILE 5
    header.header-mobile-5 {
    	.yolo-sticky-wrapper {
    		height: 0!important;
    	}
    	.yolo-header-container-wrapper {
    		border-bottom: none;
    	}
    	.yolo-header-container-wrapper,
    	.yolo-mobile-header-wrapper {
    		background-color: transparent;
    	}
    	.yolo-header-container-wrapper {
    		background-color: transparent;
    		position: absolute;
    		z-index: 997;
    		width: 100%;
    	}
    	.header-logo-mobile {
    		text-align: left;
    	}
    	.yolo-mobile-header-inner .toggle-icon-wrapper {
    		left: auto;
    		right: 5px;
    	}
    	.toggle-icon-wrapper .toggle-icon > span,
    	.toggle-icon-wrapper .toggle-icon:before,
    	.toggle-icon-wrapper .toggle-icon:after{
    		background-color: @white;
    		.box-shadow(0px 0px 5px 1px rgba(0,0,0,0.1));
    	}
    	.toggle-icon-wrapper.in .toggle-icon > span {
    		display: none;
    	}
    	.yolo-mobile-header-inner .header-customize {
    		right: 50px;
    	}
    	.yolo-mobile-header-inner .icon-search-menu,
    	.shopping-cart-wrapper .widget_shopping_cart_content .widget_shopping_cart_icon > i.wicon {
    		border-color: @white;
    		color:@white;
    	}
    }

	// STICKY MOBILE MENU
	//-----------------------------------

	.yolo-sticky-wrapper.is-sticky > .yolo-header-container-wrapper {
		z-index: 997;
		left: 0;
		right: 0;
	}

	.yolo-sticky-wrapper:not(.is-sticky){
		height: auto!important;
		position: relative!important;
	}

	body.menu-mobile-in .yolo-sticky-wrapper.is-sticky > .yolo-header-container-wrapper.menu-drop-fly {
		left: 280px;
		right: -280px;
	}
}
@media screen and (max-width: 600px) {
	#wpadminbar {
		top: -46px;
	}
}
@media screen and (max-width: 480px) {
	.shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper {
		min-width: 280px;
	}
}
@media screen and (max-width: 320px) {
	.shopping-cart-wrapper .widget_shopping_cart_content .cart_list_wrapper {
		min-width: 254px;
	}
}