.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}



* { box-sizing:border-box; }
html, body { min-width: 100vw; min-height: 100vh; margin:0; padding:0; }
body { 	font-family:Arial, Helvetica, sans-serif; color:#FFF; }

#logo { position:absolute; top:0; left:0; display:flex; flex-wrap:wrap; align-items:end; overflow:hidden; }
#logo img { padding:20px; background:#fdb814; width:230px;  }
#logo h1 { margin:0; padding-left:40px; font-size:40px;

font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
  
}
#logo h1.mobile { display:none; }

#right-border { position:absolute; top:0; right:0; width:60px; height:100%; background:#fdb814;  }

#login-bkg {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background-image:url("../img/login/x2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#login-wrapper {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

#login-content {
	margin-left:250px;
	padding:30px;
	max-width:calc(400px + 60px);
	
	font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#login-content form {
	margin-top:50px;
	width:fit-content;
	padding:30px;
	background-color:rgba(255, 255, 255, 0.5);
}

#login-content small { font-size:12px; }

#login-content p span { white-space:nowrap; }

.input-container {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	margin-bottom: 15px;
}

.icon {
	padding: 10px;
	background: #5A5A5A;
	color: white;
	min-width: 80px;
	text-align: center;
	padding-top:12px;
}

.input-field {
	display:block;
	right: 10px;
	outline: none;
	margin-left:10px;
	padding-left:5px;
	width:250px;
}

.input-field:focus {
	border: 2px solid dodgerblue;
}

.btn {

font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;


	font-size:20px;
	background-color: #5A5A5A;
	color:#fdb814;
	padding: 15px 20px;
	border: none;
	cursor: pointer;
	width:330px;
	opacity: 0.9;
}

.btn:hover { opacity: 1; }

@media (max-width:940px) {
	#logo h1 { display:none; }
	#logo h1.mobile { display:block; }
	#login-content { margin: 80px auto 0 auto; }
	#right-border { width:0px; display:none; }
}

@media (max-width:720px) {
	#logo { width:100%; }
	#logo img { margin:auto; }
	#logo h1.mobile { width:100%; text-align:center; margin-top:25px; padding-left:0; }
	#login-content { margin:120px auto 0 auto; padding:0px; width:auto; }
	#login-content form { margin:120px auto 0 auto; }
	#login-content p { width:310px; }
	.input-field { width:160px; }
	.btn { width:250px; }
}