@charset "UTF-8";
@media only screen and (min-width: 1200px) {
}
@media only screen and (max-width: 960px) {
  #intro {
    padding: 15% 30% 30% 36% !important;
  }
}
@media only screen and (max-width: 640px) {
  #intro {
    padding: 15% 26% 30% 32% !important;
  }
}
@media only screen and (max-width: 480px) {
  #intro {
    padding: 16% 16% 28% 32% !important;
  }
}
#intro {
  padding: 15% 36% 30%;
}
#formHolder {
	position: relative;
	width: 100%;
	height: auto;
}
#loginBox {
	position:relative;
	background-color:rgba(26, 40, 60, .35);
	width:100%;
	height:auto;
  padding:5% 0 3%;
	border-radius: .5em;
}
#loginText {
	position:relative;
	font-weight:700;
	text-align:center;
	color:#FFF;
}
#loginBox2 {
	position:relative;
	width:80%;
	height:auto;
	margin: 6% auto 0px;
}
form {
	position: relative;
  width:100%;
  height:auto;
}
#field1 {
	position: relative;
	background-color:#FFF;
	font-size:1em;
	font-weight:700;
	color:#000;
	text-align:center;
	width: 100%;
  height:auto;
  padding:2%;
	border-radius: .5em;
}
#submitBtn {
	position:relative;
	background-color:#FFF;
	width:max-content;
  padding:2% 10%;
	margin: 7% auto 0;
	border-radius: .5em;
}

input[type=submit] {
	position:relative;
	background-color:#FFF;
  	font-size:1em;
	font-weight:700;
	color:var(--purple);
	text-align:center;
  border: 1px solid #FFF;
  outline: none;
	cursor:pointer;
	
}
#error {
	position: relative;
	font-size:.8em;
	color:var(--orange);
	text-align:center;
	margin-top:5px;
	visibility:hidden;
  margin:2% 0 0;
}
input[type=password] {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  width:100%;
  height:auto;
  outline: none;
  margin:0 auto;
  border: 2px solid #FFF;
}
input[type=password]:focus {
	background-color:rgba(26, 40, 60, .2);
  //border: var(--purple) 2px solid;
}
input[type=submit]:focus {
  outline: none;
}