@font-face {
    font-family: "planer";
    src: url("Planer-Regular-webfont.ttf");
}
body, header, section { margin: 0; padding: 0; font-family: planer; font-size: 11pt; }

body { content: ""; display: flex; width: 100%; min-height: 100vh; height: 100%; background: url('header.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; flex-wrap: wrap; justify-content: space-around; align-items: center; }
.error { color: #CC0000; font-weight: 600; letter-spacing: 1px; font-size: 12pt; font-family: planer; height: 50px; padding-bottom: 20px; }
header, section { height: 100vh; width: 50%; }
header { }
header .h_content { width: 100%; height: 60vh; margin-top: 20vh; border-right: 1px solid rgba(255, 255, 255, 0.1); text-align: right; }
header .info { display: inline-block; font-size: 16pt; color: #FFF; margin-right: 100px; text-align: center; letter-spacing: 1px; font-family: "planer"; line-height: 26pt; margin-top: calc(20vh - 100px); }
header img.logo { border-width: 0; width: 150px; }
header .info div { font-size: 10pt; padding-top: 40px; }
form { text-align: center; display: inline-block; margin-left: 100px; margin-top: calc(40vh - 100px); padding-bottom: 40px; }

input[type="text"], input[type="password"] { padding: 10px; min-width: 250px; margin: 10px 0; border: 1px solid rgba(200, 200, 200, 0.6); background: rgba(200, 200, 200, 0.1); font-size: 11pt; color: #fff; border-radius: 3em; font-family: "planer"; letter-spacing: 1px; }
input::placeholder { color: #fefefe; }
input[type="submit"] {
    cursor: pointer;
    font-family: "planer";
    display:inline-block;
	font-size: 12pt;
	line-height: 20pt;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 200;
	border: 2px solid #1b6377;
	background-color: #1b6377;
	text-transform: none;
	padding: 5px 20px;
	text-decoration: none;
	transition: all 0.4s linear;
	border-radius: 3em;
    margin-top: 20px;
    letter-spacing: 1px;
}
input[type="submit"]:hover { background-color: rgba(200, 200, 200, 0.2); color: #1b6377; }
footer { position: absolute; height: 30px; left: 0; bottom: 1px; width: 100%; text-align: center; font-family: planer; font-size: 11pt; color: rgba(255, 255, 255, 0.6); }
footer a { color: rgba(255, 255, 255, 0.9); font-size: 12pt; text-decoration: none; }

@media only screen and (max-width: 960px) {
    header img.logo { border-width: 0; width: 120px; }
    header, section { height: auto; width: 100%; text-align: center; }
    header .h_content, form { text-align: center; margin: 0; height: auto; }
    header .info { margin-right: 0; margin-top: 0; font-size: 14pt; }
    .error { height: 30px; padding-bottom: 5px; }
    header .info div { padding-top: 10px; }
}