#profile .nav-justified > li:first-child a {
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
}
#profile .nav-justified > li {
    float: left;
    width: 33.3%;
}

@media (max-width: 767px) {
	
	#overlay {
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		background-color: rgba(0,0,0,0.25);
	}
	body.sidebar-collapse {
		overflow: hidden;
	}
	.sidebar-collapse #overlay {
		right: 0px;
		z-index: 888;
	}
	body.sidebar-collapse #main-nav {
		-webkit-transform: translate(220px);
		transform: translate(220px);
	}
	body.sidebar-collapse main {
		padding-top: 0px;
	}
	body.sidebar-collapse #header {
		position: static;
	}
	body.sidebar-collapse #header .navbar-header {
		z-index: 999;
		width: 100%;
	}
	body.sidebar-collapse #header .navbar-header .hidden-xxs {
		display: block!important;
	}
	
	.hamburger {
		padding: 7px 7px 20px!important;
	}
	.hamburger .fa {
		position: relative;
		top: 6px;
	}
	.hamburger .fa, .hamburger .fa:before, .hamburger .fa:after {
		background-color: #fff;
		width: 25px;
		height: 3px;
		display: block;
		border-radius: 6px;
		
		transition-timing-function: ease;
		transition-duration: .15s;
		transition-property: transform;
		border-radius: 4px;
	}
	.hamburger .fa:after {
		bottom: -8px;
	}
	.hamburger .fa:before {
		top: -8px;
	}
	.hamburger .fa:before, .hamburger .fa:after {
		content: "";
		position: absolute;
		left: 0;
	}
	.sidebar-collapse .hamburger .fa {
		transform: rotate(-180deg) scaleX(.7);
	}
	.sidebar-collapse .hamburger .fa:after {
		transform: translate3d(8px,-4px,0) rotate(-35deg) scaleX(.7);
	}
	.sidebar-collapse .hamburger .fa:before {
		transform: translate3d(8px,4px,0) rotate(35deg) scaleX(.7);
	}
}

	#main-nav .nav-stacked>li>ul>li>a:before {
		content: "\f10c";
		position: absolute;
		margin: 2px 0 0 -18px;
		display: block;
		font-size: 8px;
		font-family: "FontAwesome";
		opacity: 0;
	}
	#main-nav .nav-stacked ul>li.active>a:before, 
	#main-nav .nav-stacked ul>li.active>a {
		color: #008d82;
	}
	body.blue #main-nav .nav-stacked ul>li.active>a:before, 
	body.blue #main-nav .nav-stacked ul>li.active>a {
		color: #009BDD;
		color: #3B8DBC!important;
	}
	body.red #main-nav .nav-stacked ul>li.active>a:before,
	body.red #main-nav .nav-stacked ul>li.active>a {
		color: #EF6262!important;
	}
	body.black #main-nav .nav-stacked ul>li.active>a:before,
	body.black .navbar-header,
	body.black #main-nav .nav-stacked ul>li.active>a {
		color: #2A343D;
	}
	#main-nav .nav-stacked ul>li.active>a:before {
		opacity: 1;
		content: "\f111";
	}
	body.sidebar-collapse #main-nav .nav-stacked>li.active:hover:after {
		display: none;
	}
	#main-nav .nav-stacked .caret {
		position: absolute;
		right: 25px;
		top: 16px;
		display: block;
		width: 14px;
		height: 14px;
		border: none;
		font-size: 11px;
	}
	#main-nav .nav-stacked .caret:before, 
	#main-nav .nav-stacked .caret:after {
		content: "\f068";
		font-family: FontAwesome;
		position: absolute;
		left: 1px;
		top: -4px;
	}
	#main-nav .nav-stacked .caret:after {
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
		left: 0px;
		top: -5px;
	}
	#main-nav .nav-stacked a[aria-expanded=true]:not(.collapsed) .caret:after {
		opacity: 0;
	}

@media (min-width: 768px) {
	#main-nav .nav-stacked .caret {
		opacity: 0;
	}
	#main-nav .nav-stacked a:hover .caret {
		opacity: 1;
	}
	
/*
	.side-nav-div {
		position: fixed;
		top: 51px;
		left: 0;
		width: 217px;
		border: none;
		border-radius: 0;
		bottom: 0;
		padding-bottom: 0px;
		z-index: 810;
	}
*/
	
	#main-nav .nav-stacked>li.active:after, 
	#main-nav .nav-stacked>li.active:before {
		right: -1px;
	}
	
	body.sidebar-collapse #page-wrapper {
		margin-left: 50px!important;
	}
	
	body.sidebar-collapse #main-nav {
		-webkit-transform: translate(50px);
		transform: translate(50px);
	}
	body.sidebar-collapse .side-nav-div {
		margin-left: 170px;
		z-index: 850;
	}
	#main-nav .nav-stacked span.text {
		position: absolute;
		padding-left: 5px;
	}
	body.sidebar-collapse #main-nav .nav-stacked a b {
		display: none;
	}
	body.sidebar-collapse #main-nav .nav-stacked>li, 
	body.sidebar-collapse #main-nav .nav-stacked>li>a, 
	body.sidebar-collapse #main-nav .nav-stacked .fa:after {
		width: 50px;
		position: relative;
	}
	body.sidebar-collapse #main-nav ul.nav-stacked ul > li > a {
		padding-left: 15px;
	}
	body.sidebar-collapse #main-nav .nav-stacked span.text, 
	body.sidebar-collapse #main-nav .nav-stacked ul {
		position: absolute;
		left: -175px;
		width: 167px;
		z-index: 0;
		
		-ms-transition: left 0.3s ease-in-out;
		-webkit-transition: left 0.3s ease-in-out;
		-moz-transition: left 0.3s ease-in-out;
		-o-transition: left 0.3s ease-in-out;
		transition: left 0.3s ease-in-out;
	}
	body.sidebar-collapse #main-nav .nav-stacked ul {
		top: 0;
		border-radius: 0 0 6px 0;
		display: block;
		padding-top: 40px;
		height: auto!important;
		
		-webkit-box-shadow: 1px 1px 2px -2px #000;
		-moz-box-shadow: 1px 1px 2px -2px #000;
		box-shadow: 1px 1px 2px -2px #000;
	}
	body #main-nav .nav-stacked .fa:before {
		display: block;
	}
	body #main-nav .nav-stacked .fa:before, 
	body.sidebar-collapse #main-nav .nav-stacked .fa {
		z-index: 3;
		position: relative;
	}
	/*
	body.sidebar-collapse #main-nav .nav-stacked .fa:after {
		content: "";
		display: block;
		position: absolute;
		top: -16px;
		left: -15px;
		height: 44px;
		z-index: 2;
	}
	*/
	body.sidebar-collapse #main-nav ul.nav-stacked > li > a {
		text-align: center;
		padding-left: 0;
		padding-right: 0px;
	}
	body.sidebar-collapse #main-nav .nav-stacked span.text {
		font-weight: bold;
		z-index: 888;
		color: #fff;
		top: 0px;
		z-index: 1;
		text-align: left;
	}
	body.sidebar-collapse #main-nav .nav-stacked>li span.text, 
	.navbar-nav>li>a {
		padding: 10px 15px!important;
	}
	body.sidebar-collapse #main-nav .nav-stacked>li:hover span.text, 
	body.sidebar-collapse #main-nav .nav-stacked>li:hover ul {
		left: 50px;
	}

	.side-nav-div .nav-stacked > li + li {
		margin-top: 0px;
	}
	.side-nav-div, 
	body.sidebar-collapse #main-nav .nav-stacked .fa:after, 
	body.sidebar-collapse #main-nav .nav-stacked span.text {
		background-color: #edecec;
	}
	body.sidebar-collapse #main-nav .nav-stacked li:hover .fa:after, 
	body.sidebar-collapse #main-nav .nav-stacked li:hover span.text {
		background-color: #008d82;
	}
	body.blue.sidebar-collapse #main-nav .nav-stacked li:hover .fa:after, 
	body.blue.sidebar-collapse #main-nav .nav-stacked li:hover span.text {
		background-color: #009BDD;
		background-color: #3B8DBC;
	}
	body.red.sidebar-collapse #main-nav .nav-stacked li:hover .fa:after, 
	body.red.sidebar-collapse #main-nav .nav-stacked li:hover span.text {
		background-color: #EF6262;
	}
	body.black.sidebar-collapse #main-nav .nav-stacked li:hover .fa:after, 
	body.black.sidebar-collapse #main-nav .nav-stacked li:hover span.text {
		background-color: #2A343D;
	}
	.sidebar-collapse nav .navbar-header .top-nav {
		float: left!important;
	}
	
	.sidebar-collapse #profile h5 {
		display: none;
	}
	.sidebar-collapse #profile {
		padding: 0 5px 5px;
		margin-left: -1px;
		width: auto;
	}
	.sidebar-collapse #profile .nav-justified li {
		float: none;
		width: auto;
		display: block;
		padding-bottom: 10px;
	}
	.sidebar-collapse #profile img {
		width: 30px;
	}
	.sidebar-collapse #profile a,
	.sidebar-collapse #profile label, 
	.navbar-header a.pull-left {
		display: block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
	}
}