#tie-wrapper:after{
	position: absolute;
	z-index: 1000;
	top: -10%;
	left: -50%;
	width: 0;
	height: 0;
	background: rgba(0, 0, 0, 0.2);
	content: '';
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.side-aside{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 111;
	visibility: hidden;
	width: 350px;
	height: 100%;
	background: $darker-bg-more;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	transition: 0.5s cubic-bezier(.55,0,.1,1) 0s;
	transform: translate3d(350px, 0, 0);
	overflow-y: auto;

	@include breakpoint(max_min_md){
		transform: translate3d(100%, 0, 0);
		width: 100%;
	}

	.is-mobile & .side-aside-wrapper,
	.is-desktop & .mCSB_container{
		padding: 50px 0 0;
	}

	.admin-bar.is-desktop & .mCSB_container,
	.is-mobile.admin-bar & .side-aside-wrapper{
		padding-top: 72px;
	}

	.widget-content-only{
		&:first-child{
			margin-top: 20px;
		}
	}

	.container-wrapper {
		border-radius: 0;
		border: 0;
		background: transparent;
	}

	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		content: '';
		opacity: 1;
		transition: opacity 0.5s;
	}

	&.normal-side.dark-skin{
		.container-wrapper {
			padding: 30px !important;
		}

		.tie-weather-widget{
			padding: 0 !important
		}

		.widget-content-only{
			padding-bottom: 0 !important;
		}

		.widget-content-only {
			&.tie-slider-widget {
				padding-bottom: 0;
			}
		}
	}
}

.side-aside-open{
	#tie-wrapper{
		&:after{
			width: 200%;
			height: 110%;
			opacity: 1;
			transition: opacity 0.5s;

			.border-layout &{
				opacity: 0;
			}
		}
	}

	.side-aside {
		visibility: visible;
		transform: translate3d(0, 0, 0)!important;

		&:after {
			display: none;
			width: 0;
			height: 0;
			opacity: 0;
			transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
		}
	}
}

.close-side-aside{
	position: absolute;
	z-index: 1;
	top: 15px;
	left: 30px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 25px;
	background: transparent !important;
	transition: 0.3s;
	opacity: 0.7;

	&:hover{
		opacity: 1;
	}

	body.admin-bar &{
		top: 47px;
	}

	body.admin-bar.is-mobile &{
		top: 61px;
	}
}
