/*Credit:Terry Gillespie*/
html {
   height: 100%;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
font-family: 'lato', sans-serif;
color: #fff;
background:#0e4d92;
background-image: url(".././img/login4.jpg");
}
h1,h2{
  text-align: center;
  margin-bottom: 0;
}

.container {
	background:rgba(58,63,68,0.6);
  border-radius: 0.3125rem;
  box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
  width:37.5rem;
  display: flex;  
  flex-direction: column;
}
.logo{
  font-family: "museo-slab";  
  font-size:1.25rem;
  text-align: center;
  padding: 1.25rem 1.25rem 0;
  margin:0;
}
.login-item {
  color: #ffff;
  padding:1.5625rem 1.5625rem 0;
  margin: 1.25rem 1.25rem 0;  
  border-radius: 0.1875rem;
}
.login-item1 {
  color: #ffff;
  padding:.5625rem 1.5625rem 0;
  margin: 1.25rem 1rem 0;  
  border-radius: 0.1875rem;
}
.form input[type="password"], .form input[type="text"], .form input[type="submit"],.form input[type="email"] {
  width: 100%;
}
.form-login label,
.form-login input[type="text"],
.form-login input[type="password"],
.form-login input[type="email"],
.form input[type="submit"] {
  border-radius: 0.25rem;
  padding: 0.8rem;
  color: #3A3F44;  
}
.margin-left{
  margin-left: 0.625rem;
}
/* .form-login label {
  background-color: #DCDCDC;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
} */
.form-login input[type="text"], .form-login input[type="password"] {
  background-color: #ffffff;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.form-login input[type="text"]:focus, .form-login input[type="text"]:hover, .form-login input[type="password"]:focus, .form-login input[type="password"]:hover {
  background-color: #eeeeee;
}
.form-login input[type="submit"] {
  background-color: #197071;
  color: #eee;
  font-weight: bold;
  text-transform: uppercase;
}
.form-login input[type="submit"]:focus, .form-login input[type="submit"]:hover {
  background-color: #197071;
}
.form-field {
  display: flex;
  margin-bottom: 1.8rem;
}
.form-label-field {
  display: flex;
  /* margin-bottom: 0.2rem; */
}
.form-login a{
  color: white;
  text-decoration: none;
  border-radius: 0.25rem;
  padding: 1rem;
   /* background-color: #3A3F44; */
  color: #eee;
  font-weight: normal;
  font-size: 1rem;
  /* border-radius: 0.25rem; */
}
.form-login a:hover{
  color: grey
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  border: 0.0625rem solid #888;
  border-radius: 0.25rem;
  width: 30%;
  height: 30% /* Could be more or less, depending on screen size */
}
.modal-content p{
  color: black;
  padding: 1.25rem;
  font-size: 1.2rem;
}
.modal-header{
  height:2rem;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 1.2rem;
  margin-right: 1rem;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (max-width: 43.75rem) {
	.modal-content{
		min-width: 12.5rem;
	}

}
@media screen and (max-width: 25rem) {
	.modal-content{
		min-width: 15.5rem;
	}

}