#sidebar{
	width: $size_sidebar_normal;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: $sidebar_back_color;
	overflow: auto;
	z-index: 1;
	-webkit-overflow-scrolling: touch;
	ul,li{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body.side &{
		transform: translate3D(0,0,0);
	}
	.profile{
		padding-top: 40px;
		padding-bottom: 10px;
		a,img{
			width: $size_gravatar_normal;
			height: $size_gravatar_normal;
			border-radius: $size_gravatar_normal;
			overflow: hidden;
		}
		a{
			display: block;
			margin: 0 auto;
		}
		span{
			display: block;
			padding: 10px 0;
			font-size: 18px;
			color: $sidebar_font_color;
			text-align: center;
		}
	}
	.buttons{
		margin: 0 0 20px;
		li{
			display: block;
			width: 100%;
			height: 45px;
			line-height: 45px;
			font-size: 16px;
			a{
				padding-left: 25px;
				display: block;
				color: $sidebar_font_color;
				transition: color .2s $curve;
				text-decoration: none;
				i,span{
					display: inline-block;
					vertical-align: middle;
				}
				i{
					font-size: 20px;
					width: 25px;
					height: 45px;
					line-height: 45px;
					text-align: center;
					margin-right:  20px;
				}
				&:hover{
					color : $sidebar_hover_color;
				}
			}
		}
	}
	@include max-screen( 768px ){
		&.behavior_1{
			transform: translate3D( -$size_sidebar_normal , 0, 0 );
		}
		&.behavior_2{
			transform: translate3D( 0 , 0, 0 );
		}
		&{
			transition: transform .2s $curve;
			.profile{
				padding-top: 20px;
				padding-bottom: 20px;
				a,img{
					width: $size_gravatar_large;
					height: $size_gravatar_large;
					border-radius: $size_gravatar_large;
				}
				span{
					display: none;
				}
			}
		}
	}

	@include screen( 768px , 1024px ){
		&{
			width: $size_sidebar_mini;
			.profile{
				padding-top: 20px;
				a,img{
					width: $size_gravatar_mini;
					height: $size_gravatar_mini;
					border-radius: $size_gravatar_mini;
				}
				span{
					display: none;
				}
			}
			.buttons{
				li{
					a{
						padding: 0;
						i{
							font-size: 18px;
							display: block;
							margin: 0 auto;
						}
						span{
							display: none;
						}
					}
				}
			}
		}
	}
}
#sidebar-mask{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	overflow: hidden;
	display: none;
	background-color: rgba(255,255,255,0);
}