h1,h2,h3,h4,h5{
	font-family: RobotoLight, sans-serif;
	font-weight: 200;
}

.container-login{ position: relative; top: 45vh; transform: translatey(-50%); margin: 0 auto; }

#sides{ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); }

.sidepane{ height: 500px; padding: 30px; }

.sidepane .avatar{
	position: relative;
	width: 120px;
	height: 120px;
	border: 1px solid white;
	background-color: transparent;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
	border-radius: 100%;
	margin: 20px auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 48px;
}

.sidepane .avatar .emote{
	position: absolute;
	left: 50%;
	bottom: -13px;
	margin-left: -13px;
	width: 26px;
	height: 26px;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
	border-radius: 100%;
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.sp-dark{ background-color: #2B96D0; color: white; }
.sp-dark .avatar{ border-color: white; background-image: url('../img/avatar_dark.svg');}
.sp-light{ background-color: #F4F4F4; color: #7D7D7D; }
.sp-light .avatar{ border-color: #7D7D7D; background-image: url('../img/avatar_white.svg'); }
.sp-dark .avatar .emote{ background-color: white; border: 1px solid #2B96D0; background-image: url('../img/emote1.svg'); }
.sp-light .avatar .emote{ background-color: #F4F4F4; border: 1px solid #7D7D7D; background-image: url('../img/emote2.svg'); }

.middle-choice{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	background-color: white;
	border: 1px solid #b4b4b4;
	padding: 5px 15px;
	z-index: 2;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	font-family: Roboto, sans-serif;
	font-size: 16px;
}

.sp-dark .form-control{ border: 1px solid #1c5d81 !important; }

.circle-registration{
	width: 60px;
	height:60px;
	border-radius: 100%;
	background-color: #5D2876;
}