//==============================================================================
// YOLO CANVAS MENU
//==============================================================================
nav.yolo-canvas-menu-wrapper {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 100%;
	bottom: 0;
	width: 270px;
	transform: translateX(0);
	overflow: hidden;
	padding: 25px;
	.box-shadow(0 0px 10px 0 rgba(0, 0, 0, 0.2));
	.transition (all .5s);

	&.in {
		.transform(translateX(-100%));
	}

	.yolo-canvas-menu-close {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 18px;
		cursor: pointer;
		color: @white;
	}
	.yolo-canvas-menu-inner{
		padding: 0;
		box-shadow: none;
		background-color: @gray-dark;
		color: @white;
		aside{
			padding: 0;
			border: none;
			&:before{
				top: 2px;
			}
			h4{
				padding-left: 10px;
				color: @white;
				&.widget-title{
					margin-top: 25px;
					margin-bottom: 25px;
					text-align: center;
					span{
						padding: 0;
						color: @primary_color;
					}
					&:before{
						display: none;
					}
				}
			}
			ul{
				li.menu-item{
					font-size: 12px;
					color: @white;
					border-bottom: 1px solid fade(@white, 20%);
					letter-spacing: 0.1em;
					font-weight: bold;
					a {
						padding: 8px 4px;
						&:hover {
							padding-left: 15px;
						}
					}
				}
				&.social-profile.social-icon-bordered {
					li{
						a{
							&:hover{
								i{
									color: @primary_color;
								}
								
							}
						}
					}
					
				}
			}
			& .about-description{
				padding: 15px 0;
			}
		}
	}

	&.dark {
		background-color: @gray-dark;
		color: @white;
		.widget_archive,
		.widget_categories,
		.widget_pages,
		.widget_nav_menu > div,
		.woocommerce .widget_product_categories,
		.widget_layered_nav {
			> ul {
				border-bottom-color: rgba(255, 255, 255, 0.2);
			}

		}

		li + li,
		.widget_posts_item + .widget_posts_item {
			border-top-color: rgba(255, 255, 255, 0.2);
		}
		.widget_categories,
		.widget_pages,
		.widget_nav_menu > div,
		.widget_product_categories {
			ul ul {
				border-top-color: rgba(255, 255, 255, 0.2);
			}
		}
	}
}

body.admin-bar nav.yolo-canvas-menu-wrapper {
	top: 32px;
}

.canvas-menu-toggle-wrapper {
	i.micon {
		vertical-align: middle;
	}
}