body{ 
    opacity: 0;
    transition: opacity 0.6s;
    -webkit-transition: opacity 0.6s; /* Safari */
     transition: all 0.5s ease;
}

#loading{
	position:absolute;
	width:100%;
	height: 100%;
	z-index: 1000;
	top:0px;
	left:0px;
	padding-top:15%;
}

.avatar{
	background-size: cover;
	width:64px;
	height:64px;
	border-radius:32px;
	background-repeat: no-repeat;
	border:1px solid #efefef;
	background-image: url("/auth/loader-circle.gif");
}


.avatar-none{
	background-size: cover;
	width:64px;
	height:64px;
	border-radius:32px;
	background-color: #0093E9;
	background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
	border:1px solid #efefef;
	color: rgba(255,255,255,0.8);
	font-size:28px;
}

.avatar-sm-none{
	background-size: cover;
	width:32px;
	height:32px;
	border-radius:16px;
	border:1px solid #efefef;
	background-color: #0093E9;
	background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
	color: rgba(255,255,255,0.8);
	font-size:18px;
}

.avatar-md-none{
	background-size: cover;
	width:128px;
	height:128px;
	border-radius:64px;
	background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
	border:1px solid #efefef;
	color: rgba(255,255,255,0.8);
	font-size:48px;
}

.avatar-tiny{
	background-size: cover;
	width:24px;
	height:24px;
	border-radius:12px;
	background-repeat: no-repeat;
	background-image: url("/auth/loader-circle.gif");
}

.avatar-sm{
	background-size: cover;
	width:32px;
	height:32px;
	border-radius:16px;
	border:1px solid #efefef;
	background-repeat: no-repeat;
	background-image: url("/auth/loader-circle.gif");
}

.avatar-md{
	background-size: cover;
	width:128px;
	height:128px;
	border-radius:64px;
	border:1px solid #efefef;
	background-repeat: no-repeat;
	background-image: url("/auth/loader-circle.gif");
	background-color:#fff;
}

.nav-avatar{
	background-size: cover;
	width:24px;
	height:24px;
	border-radius:12px;
	background-repeat: no-repeat;
	float:left;
	border:1px solid #efefef;
	margin-right:10px;
	background-image: url("/auth/loader-circle.gif");
}


.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}


@keyframes fadeInOpacity {
	0% {opacity: 0;}
	100% {opacity: 1;}
}