html, body {
	background-color: #040D12;
	width: 100%;
	height: 100%;
}

.login-screen{
	opacity: 0;
	height: 100%;
	width: 100%;
	display: block;
	overflow: hidden;
	background: url('../../images/login-bg.jpg') no-repeat center center;
	background-size: cover;

	-webkit-animation-name: show;
	-webkit-animation-duration: 0.3s;	
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 0.3s;		
	animation-name: show;
	animation-duration: 0.3s;	
	animation-fill-mode: forwards;
	animation-delay: 0.3s;			
}


.vertical-center {
	position: relative; 
	top: 50%;
	transform: translateY(-50%);
}

.environment {
	
	padding: 10px;
	
	position: absolute;
	bottom: 0px;
	right: 0px;
	
	color: #fafafa;
	
	opacity: 0;
	-webkit-animation-name: show;
	-webkit-animation-duration: 1s;	
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 1.3s;		
	animation-name: show;
	animation-duration: 1s;	
	animation-fill-mode: forwards;
	animation-delay: 1.3s;		
}

.loginPanel {
	
	background-color: #040D12;
	border-radius: 0px !important;
	height: 150px;
	width: 860px;
	left: -860px;
	top: 50%;
	padding: 0px;
	box-shadow: 0px 4px 16px black;
	
	
	-webkit-animation-name: show;
	-webkit-animation-duration: 0.6s;	
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 0.6s;		
	animation-name: run;
	animation-duration: 0.6s;	
	animation-fill-mode: forwards;
	animation-delay: 0.6s;		
}

@-webkit-keyframes run {
    0% { left: -860px;}
    100%{ left: 0px;}
}

.logo-wrapper img{
	position: absolute;
	top: -150px;
	
	opacity: 0;
	-webkit-animation-name: show;
	-webkit-animation-duration: 1s;	
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 1.3s;		
	animation-name: show;
	animation-duration: 1s;	
	animation-fill-mode: forwards;
	animation-delay: 1.3s;		
}

.login-wrapper{
	height: 100%;
	padding: 0px;
}

.loggin-button-wrapper {
	background-color: #F1571C;
	color: #fafafa;
	display: block;
	height: 100%;
	position: relative;
	left: 25px;
	top: 25px;
}

.login-button {
	width: 100%;
	height: 100%;
	background-color: #F1571C;
	color: #fafafa;
	font-size: 3rem;
	font-weight: bold;
}

.login-inputs {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.login-inputs input {
	border: 0px;
	border-radius: 0px;
	border-bottom: 1px solid #fafafa;
	background-color: #040D12;
	box-shadow: none;
	color: #F1571C;
}

.form-control:focus {
	border-color: transparent;
	box-shadow: none;
	border-bottom: 1px solid #F1571C;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

/** SPINNER **/
.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 0px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fafafa;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.fadeIn{
	opacity: 0;
	-webkit-animation-name: show;
	-webkit-animation-duration: 0.3s;	
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 0.3s;		
	animation-name: show;
	animation-duration: 0.3s;	
	animation-fill-mode: forwards;
	animation-delay: 0.3s;		
}

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