html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    min-height: 100vh;
    background: #02bac6 url("../../images/lock-bg.jpg");
    background-size: cover;
    background-repeat: repeat;
    font-family: 'Roboto', sans-serif;
    padding-top: 1px;
    padding-bottom: 1px;
	background-position: center center !important;
}

.login-box {
    margin: 10% auto;
    max-width: 330px;
}

#time {
    width: 100%;
    color: #e30000;
    font-size: 60px;
    margin-bottom: 71px;
    display:none;
    text-align: center;
    font-weight: 100;
}

.login-box .box {
    background: transparent;
    padding: 20px;
    border-radius: 1px;
    -webkit-border-radius: 10px;
    position: relative;
}
.avatar{
	width: 120px;
	height: 120px;
	margin: -88px auto 20px auto;
	border-radius: 1%;
	overflow: hidden;
}
.avatar img{
	max-width:100%;
	visibility: hidden;
  background-color:white;
        border-radius:5%;
}
.logo{
	border-radius: 5px;
	position: fixed;
	overflow: hidden;
	/* margin-top:0;
	margin-left:0;
	margin-right:auto;
	margin-left: auto; */
	left: 25px;
	top: 25px;
	width: 250px;
}
.user,.pass{
	position:relative;
	padding-right:50px;
}
.user{
	margin-bottom:15px
}
.pass{
	margin-bottom: -34px;
}
.pass .btn-login{
	position:absolute;
	right:0;
	font-size: 0;
	background-color: #01b5c4;
	padding: 0;
	width: 43px;
	height: 34px;
	top: 0;
	box-shadow: none;
	background-image: url(../../images/enter.svg);
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 3;
}
.logo img{
	width:100%;
}