@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{
height: 100%;
font-family: 'Numans', sans-serif;
}

.container{
height: 100%;
align-content: center;
}

.card{
margin-top: auto;
margin-bottom: auto;
width: 350px;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;

font-size: 13px;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
font-weight: 600;
color: #fff;
text-align: center;
padding: 0px 10px;
background-image: -webkit-gradient(linear, left top, right top, from(#744fff), color-stop(51%, #21d397), to(#744fff));
background-image: -webkit-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%);
background-image: -o-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%);
background-image: linear-gradient(to right, #744fff 0%, #21d397 51%, #744fff 100%);
-webkit-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
background-size: 200% auto;
border: none;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 3px;
cursor: pointer;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;


text-transform: uppercase;
font-family: "Poppins", sans-serif;
font-weight: 600;
color: #fff;
text-align: center;
padding: 0px 10px;
background-image: -webkit-gradient(linear, left top, right top, from(#744fff), color-stop(51%, #21d397), to(#744fff));
background-image: -webkit-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%);
background-image: -o-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%);
background-image: linear-gradient(to right, #744fff 0%, #21d397 51%, #744fff 100%);
-webkit-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
background-size: 200% auto;
border: none;
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 3px;
cursor: pointer;

}

.login_btn:hover{
color: black;
background-color: white;
background-position: right center;
}

.login_btn:focus {
  background-image: -webkit-gradient(linear, left top, right top, from(#744fff), color-stop(51%, #21d397), to(#744fff)) !important;
  background-image: -webkit-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%) !important;
  background-image: -o-linear-gradient(left, #744fff 0%, #21d397 51%, #744fff 100%) !important;
  background-image: linear-gradient(to right, #744fff 0%, #21d397 51%, #744fff 100%) !important;
  -webkit-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  background-size: 200% auto;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
text-decoration: none;
}

canvas{
  display:block;
  vertical-align:bottom;
}



/* ---- stats.js ---- */

.count-particles{
  /*background: #000022;*/
  position: absolute;
  /*top: 48px;
  left: 0;
  width: 80px;*/
  color: #13E8E9;
  font-size: .9em;
  text-align: center;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  /*font-weight: bold;*/
}

.count-particles{
  -webkit-user-select: none;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.count-particless{
  border-radius: 0 0 3px 3px;
}

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #212529;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

a:link, a:visited, a:active, a:hover {
  text-decoration: none;
}