html, body { margin: 0; padding: 0; }


body {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: linear-gradient(180deg, #4791d2, #4791d2);
}


@font-face {
	font-family: roboto-light;
	src: url(../Roboto/Roboto-Light.ttf);
}

@font-face {
	font-family: roboto-medium;
	src: url(../Roboto/Roboto-Medium.ttf);
}

@font-face {
	font-family: roboto-regular;
	src: url(../Roboto/Roboto-Regular.ttf);
}


.content {
	display: block;
	height: auto;
	width: 320px;

	margin: auto;

	text-align: center;
}


h1 {
	color: #101010;

	text-transform: uppercase;

	letter-spacing: 18px;
	font-size: 3.5em;
	font-family: roboto-light, monospace, sans-serif;
}


.login-form{
	display: block;
	position: relative;
	height: 340px;
	width: 320px;

	margin-top: 20%;
	border-top-left-radius: 12px;
	border-radius: 12px;

	background-color: #FDFDFD;

	text-align: center;
}


.input-fields {
	display: inline-block;
	margin: 20px;

	text-align: left;
}


.input-fields h3 {
	color: #1E3072;

	text-transform: uppercase;
	letter-spacing: 2.5px;

	margin-top: 40px;
	margin-left: 2px;

	font-size: 0.78em;
	font-family: roboto-medium, monospace, sans-serif;
}


.input-fields input {
	margin-top: 8px;

	width: 240px;
	outline: none;

	border: none;
	border-bottom: solid 1px #303030;

	padding: 2px;
	padding-left: 3px;

	font-size: 1em;
	font-family: roboto-regular, monospace, sans-serif;
}
.input-fields input:focus {
	border-bottom: solid 1px #518FF5;
}


.submit-button {
	position: absolute;
	width: 100%;
	height: 60px;
	bottom: 0;

	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;

	cursor: pointer;

	background-color: #224DCE;
}


.submit-button a {
	line-height: 60px;

	letter-spacing: 1.5px;
	text-decoration: none;
	color: #F0F0F0;

	font-size: 1.4em;
	font-family: roboto-light, monospace, sans-serif;
}


.loader {
	display: block;
	visibility: hidden;
	position: absolute;

	left: calc(50% - 34px);
	top: calc(48% - 34px);

  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #EF1760;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}