//General
.site {
	z-index: 2;
	position: relative;
	-webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s;
       -moz-transition:    -moz-transform 0.3s;
            transition:         transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0.01, 0.2, 0.4);
       -moz-transition-timing-function: cubic-bezier(0.4, 0.01, 0.2, 0.4);
            transition-timing-function: cubic-bezier(0.4, 0.01, 0.2, 0.4);
    overflow: hidden;       
}
.rev_slider_wrapper {
	left: 0 !important;
}
.admin-bar {
	#off-canvas-left {
		top: 46px;
		@media only screen and (min-width: 1024px) {
			top:  32px;
		}
	}
	.sliding-menu {
		top: 46px;
		@media only screen and (min-width: 782px) {
			top: 32px;
		}
		@media only screen and (max-width: 600px) {
			top: 0;
			padding-top: 46px;
		}
	}
}
.site-header,.site-header-sticky {
	&.header-full {
		.off-canvas-toggle {
			&[data-target="off-canvas-right"] {
				margin-left: 20px;
				color: inherit;
			}
		}
	}
}
.off-canvas-toggle {
	width: 24px;
	position: relative;
	float: right;
	display: inline-block;
	line-height: 40px;
	&:before {
		width: 24px;
		height: 2px;
		content: "";
		position: absolute;
		top: 50%;
		border: 1px solid;
		margin-top: -1px;
		left: 0;
		.rounded;
	}
	span {
		display: inline-block;
		&:after,&:before {
			content: "";
			position: absolute;
			right: 50%;
			margin-right: -12px;
			width: 24px;
			height: 2px;
			top: 50%;
			margin-top: -10px;
			border: 1px solid;
			.rounded;
		}
		&:before {
			top: auto;
			bottom: 50%;
			margin-bottom: -10px;
		}
	}
	&[data-target="off-canvas-right"] {
		width: 54px;
		height: 54px;
		text-align: center;
		flex-shrink: 0;
		.rounded(27px);
		&:before {
			content: "Menu";
			width: auto;
			height: auto;
			border: none;
			text-transform: uppercase;
			font-size: 9px;
			letter-spacing: 1px;
			font-weight: 700;
			margin: 0;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.rounded(0);
		}
		span {
			&:after,&:before {
				width: 32px;
				left: auto;
				margin-right: -16px;
				right: 50%;
			}
		}
	}
}

//Left
#off-canvas-left {
	position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.3s;
       -moz-transition: visibility 0s 0.3s;
            transition: visibility 0s 0.3s;
    .box-shadow;        
	.off-canvas-wrap {
	  	height: 100%;
	    overflow-y: auto;
	    -webkit-overflow-scrolling: touch;
	    /* Force Hardware Acceleration in WebKit */
	    -webkit-transform: translateZ(0);
	       -moz-transform: translateZ(0);
	        -ms-transform: translateZ(0);
	         -o-transform: translateZ(0);
	            transform: translateZ(0);
	    -webkit-backface-visibility: hidden;
	            backface-visibility: hidden;
	    -webkit-transform: translateX(-50%);
	       -moz-transform: translateX(-50%);
	        -ms-transform: translateX(-50%);
	         -o-transform: translateX(-50%);
	            transform: translateX(-50%);
	    -webkit-transition: -webkit-transform 0.3s;
	       -moz-transition: -moz-transform 0.3s;
	            transition: transform 0.3s;
	    -webkit-transition-timing-function: cubic-bezier(0.4, 0.01, 0.3, 0.3);
	       -moz-transition-timing-function: cubic-bezier(0.4, 0.01, 0.3, 0.3);
	            transition-timing-function: cubic-bezier(0.4, 0.01, 0.3, 0.3);
	    .widget {
	    	.widget-title {
	    		color: inherit;
	    	}
	    	&:last-child {
	    		margin-bottom: 30px;
	    	}
	    }        
	}
	.off-canvas-toggle {
		display: none;
	}
}

//Right
#off-canvas-right {
	.widget_search {
		margin: 0 0 30px 0;
		.search-form {
			position: relative;
			label {
				.screen-reader-text{
					position: absolute;
					z-index: 1;
					text-indent: -9999px;
					width: 32px;
					left: 15px;
					top: 50%;
					transform: translateY(-50%);
					&:after {
						content:"\ea08";
						font-family:"Nucleo";
						font-size: 24px;
						text-indent: 0;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
				.search-field {
					width: 100%;
					border: none;
					background: @light;
					height: auto;
					padding: 15px 20px 15px 55px;
					font-size: 1rem;
					.box-shadow(none);
				}
	 		}
	 		.search-submit {
				position: absolute;
				right: 5px;
				bottom: 5px;
				height: ~"calc(100% - 10px)";
				top: auto;
				font-size: 1rem;
				background: linear-gradient(180deg, @white 0%, @light 100%);
				color: inherit;
				box-shadow: 0 5px 15px 0 rgba(107,124,147,.15), 0 2px 4px 0 rgba(107,124,147,.2), inset 0 -2px 0 0 @grey;
				text-indent: 0;
				transform: none;
				display: none;
				.rounded;
	 		}
		}
		@media only screen and (min-width: 992px) {
			display: none;
		}
	}
	.social-icons {
		a {
			margin: 0 10px 0 0;
			overflow: hidden;
			border: 1px solid @grey;
			text-align: center;
			width: 40px;
			height: 40px;
			line-height: 38px;
			.rounded(20px);
			i {
				font-size: 18px;
			}
		}
		+ .social-icons {
			display: none;
		}
	}
}
.sliding-menu {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	overflow-y: scroll;
	background: rgba(255,255,255,.96);
	-webkit-backdrop-filter: blur(6px);
			backdrop-filter: blur(6px);
	&:extend(.transition);
	.offTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.off-canvas-toggle[data-target="off-canvas-right"] {
		width: 54px;
		height: 54px;
		border: none;
		background: @red;
		color: @white;
		.rounded(100%);
		&:before {
			display: none;
		}
		span {
			&:after,&:before {
				right: auto;
				left: 50%;
				margin-left: -16px;
				margin-right: auto;
			}
			&:after {
				-webkit-transform: translateY(9px) rotateZ(-45deg);
				   -moz-transform: translateY(9px) rotateZ(-45deg);
				    -ms-transform: translateY(9px) rotateZ(-45deg);
				     -o-transform: translateY(9px) rotateZ(-45deg);
				        transform: translateY(9px) rotateZ(-45deg);
			}
			&:before {
				-webkit-transform: translateY(-9px) rotateZ(45deg);
				   -moz-transform: translateY(-9px) rotateZ(45deg);
				    -ms-transform: translateY(-9px) rotateZ(45deg);
				     -o-transform: translateY(-9px) rotateZ(45deg);
				        transform: translateY(-9px) rotateZ(45deg);
			}
		}
	}
	.off-canvas-wrap {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}
}

.menu-sliding {
	margin: 0;
	padding: 0;
	flex-grow: 1;
	li {
		list-style: none;
		position: relative;
		> .sub-menu, > .children {
			display: none;
			//font-size: 1.125rem;
		}
		.menu-item-toggle {
			width: 54px;
			height: 54px;
			cursor: pointer;
			position: absolute;
			right: 0;
			top: 0;
			.rounded(27px);
			&:after {
				content: "\ea03";
				font-family: "Nucleo";
				font-size: 24px;
				position: absolute;
				left: 0;
				top: 0;
				line-height: 54px;
				text-align: center;
				width: 54px;
			}
		}
		&.menu-item-has-children {
			> a {
				padding-right: 60px;
			}
		}
		&.menu-item-expand {
			> .sub-menu, > .children {
				display:block;
			}
			> .menu-item-toggle {
				background: @grey;
				&:after {
					transform: rotate(-180deg);
				}
			}
		}
		.sub-menu, .children {
			&:extend(.transition);
			margin: 10px 0 10px 30px;
			padding: 0;
			> li {
				&:last-child {
					> a {
						border-bottom: none;
					}
				}
				.menu-item-toggle {
					border-color: transparent;
				}
			}
		}
		a {
			display: inline-block;
			padding: 15px 0;
			position: relative;
			img {
				display: none;
			}
		}
	}
}
.sliding-overlay {
	.sliding-menu {
		left: 0;
		z-index: 101;
		visibility: hidden;
		.opacity(0);
		@media only screen and (min-width: 1024px) {
			left: 50%;
		}
	}
	&.off-canvas-right-active {
		.sliding-menu {
			visibility: visible;
			.opacity(1);
		}
	}
}
.sliding-slide {
	.sliding-menu {
		width: 280px;
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
	}
	&.off-canvas-right-active {
		.site {
			cursor: e-resize;
			-webkit-transform: translateX(-280px);
			   -moz-transform: translateX(-280px);
			    -ms-transform: translateX(-280px);
			     -o-transform: translateX(-280px);
			        transform: translateX(-280px);
		}
		.sliding-menu {
			-webkit-transform: translateX(0);
			   -moz-transform: translateX(0);
			    -ms-transform: translateX(0);
			     -o-transform: translateX(0);
			        transform: translateX(0);
		}
	}
}
.sliding-desktop-off {
	a[data-target="off-canvas-right"] {
		@media only screen and (min-width: 1024px) {
			display: none;
		}
	}
}

//Active
.off-canvas-left-active {
	#off-canvas-left {
		visibility: visible;
		-webkit-transition: visibility 0s 0s;
		   -moz-transition: visibility 0s 0s;
		        transition: visibility 0s 0s;
		.off-canvas-wrap {
		  	-webkit-transform: translateX(0);
			   -moz-transform: translateX(0);
			    -ms-transform: translateX(0);
			     -o-transform: translateX(0);
			        transform: translateX(0);
			-webkit-transition: -webkit-transform 0.3s;
			   -moz-transition: -moz-transform 0.3s;
			        transition: transform 0.3s;
			-webkit-transition-timing-function: cubic-bezier(0.4, 0.01, 0.3, 0.3);
			   -moz-transition-timing-function: cubic-bezier(0.4, 0.01, 0.3, 0.3);
			        transition-timing-function: cubic-bezier(0.4, 0.01, 0.3, 0.3);
		}
	}
	.site {
		cursor: e-resize;
		-webkit-transform: translateX(280px);
		   -moz-transform: translateX(280px);
		    -ms-transform: translateX(280px);
		     -o-transform: translateX(280px);
		        transform: translateX(280px);
	}
	.off-canvas-toggle[data-target="off-canvas-left"] {
		&:before {
			display: none;
		}
		span {
			&:after {
				width: 24px;
				-webkit-transform: translateY(9px) rotateZ(-45deg);
				   -moz-transform: translateY(9px) rotateZ(-45deg);
				    -ms-transform: translateY(9px) rotateZ(-45deg);
				     -o-transform: translateY(9px) rotateZ(-45deg);
				        transform: translateY(9px) rotateZ(-45deg);
			}
			&:before {
				width: 24px;
				-webkit-transform: translateY(-9px) rotateZ(45deg);
				   -moz-transform: translateY(-9px) rotateZ(45deg);
				    -ms-transform: translateY(-9px) rotateZ(45deg);
				     -o-transform: translateY(-9px) rotateZ(45deg);
				        transform: translateY(-9px) rotateZ(45deg);
			}
		}
	}
}
.off-canvas-right-active {
	.off-canvas-toggle[data-target="off-canvas-right"] {
		&:before {
			display: none;
		}
		span {
			&:after {
				width: 32px;
				-webkit-transform: translateY(9px) rotateZ(-45deg);
				   -moz-transform: translateY(9px) rotateZ(-45deg);
				    -ms-transform: translateY(9px) rotateZ(-45deg);
				     -o-transform: translateY(9px) rotateZ(-45deg);
				        transform: translateY(9px) rotateZ(-45deg);
			}
			&:before {
				width: 32px;
				-webkit-transform: translateY(-9px) rotateZ(45deg);
				   -moz-transform: translateY(-9px) rotateZ(45deg);
				    -ms-transform: translateY(-9px) rotateZ(45deg);
				     -o-transform: translateY(-9px) rotateZ(45deg);
				        transform: translateY(-9px) rotateZ(45deg);
			}
		}
	}
}