#side-bar-hidden-mobile {
	display: none;
}
#body-wrapper-disable {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#body-wrapper-disable.active {
	visibility: visible;
	opacity: 1;
}
#side-bar-hidden-mobile > a > i {
	transition: all 0.3s ease;
}
#side-bar-hidden-mobile > a.active > i {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
#side-bar.active,
#side-bar[data-clone="true"].active {
	left: 0;
	padding-left: 50px;
}

/* sidebar responsive */
@media(max-width: 1024px){
    .content, .sidebar{
        width: 100% !important;
            padding-left: 15px;
            padding-right: 15px;
            max-width: initial;
            flex: none;
    }
    .project-card{
        flex: 1 1 calc(50% - 20px);
    }
	html.disable-scroll {
		overflow: hidden !important;
	}
	#side-bar-hidden-mobile {
		display: block !important;
		position: fixed !important;
		top: 50%;
		left: 0;
		margin-top: -20px;
		width: 40px;
		height: 40px;
		background-color: #f1f1f1;
		z-index: 6101;
		line-height: 40px;
		text-align: center;
		border-radius: 0 10px 10px 0;
		box-shadow: 0 0 1px #9c9c9c;
	}
	#side-bar-hidden-mobile > a {
		/*color: #fff;*/
		color: #111;
		display: block;
		font-size: 14px;
	}
	#body-wrapper-disable {
		position: fixed;
		top: 0;
		left: 0;
		/*z-index: 6099;*/
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.75);
	}
	#side-bar {
		position: fixed !important;
		top: 0;
		left: -100%;
		z-index: 6100;
		width: 60%;
		height: 100%;
		overflow-y: auto;
		margin: 0;
		padding: 120px 15px 20px 15px;
		background: #fff;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	#side-bar[data-clone="true"] {
		top: 0;
		left: -100%;
	}
}
@media(max-width: 480px){
	#side-bar {
		width: 100%;
	}
}