/* TODO modularize font inclusion to be reusable */
/****************************************
BEGIN fonts
****************************************/
/* NOTE common weight names from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
/* 
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)
 */

/* NOTE loading all fonts in package even if they are not used yet; except ProximaNovaCond*.otf */
/* NOTE ProximaNovaCond*.otf files are included in package, but not loaded */

/* Aleo */
@font-face {
  font-family: 'Aleo';
  src:url("/fonts/aleo/Aleo-Bold.otf");
  font-weight: 700;
}
@font-face {
  font-family: 'Aleo';
  src:url("/fonts/aleo/Aleo-BoldItalic.otf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Aleo';
  src:url("/fonts/aleo/Aleo-Italic.otf");
  font-style: italic;
}
@font-face {
  font-family: 'Aleo';
  src:url("/fonts/aleo/Aleo-Light.otf");
  font-weight: 300;
}
@font-face {
  font-family: 'Aleo';
  src:url("/fonts/aleo/Aleo-LightItalic.otf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Aleo';
  src:url("/fonts/aleo/Aleo-Regular.otf");
}

/* Proxima Nova */
/* NOTE ProximaNovaCond*.otf files are included in package, but not loaded */
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-Black.otf");
  font-weight: 900;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-Bold.otf");
  font-weight: 700;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-BoldIt.otf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-Extrabold.otf");
  font-weight: 800;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-Light.otf");
  font-weight: 300;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-LightItalic.otf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-Regular.otf");
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-RegularItalic.otf");
  font-style: italic;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-Semibold.otf");
  font-weight: 600;
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNova-SemiboldItalic.otf");
  font-weight: 600;
  font-style: italic;
}
/* NOTE ProximaNovaCond*.otf files are included in package, but not loaded */
/* @font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNovaCond-Light.otf");
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNovaCond-LightIt.otf");
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNovaCond-Regular.otf");
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNovaCond-RegularIt.otf");
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNovaCond-Semibold.otf");
}
@font-face {
  font-family: 'Proxima Nova';
  src:url("/fonts/proxima nova/ProximaNovaCond-SemiboldIt.otf");
} */
/****************************************
END fonts
****************************************/


/****************************************
BEGIN variables
****************************************/
:root {
  --registry-blue: #00528c;
}
/****************************************
END variables
****************************************/


/****************************************
BEGIN styles
****************************************/
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-flow: column;
}
input {
  border-radius: 10pt;
  border-width: 1pt;
  border-color: #012939;
  max-width: 302pt;
  min-width:102pt;
  width: 100%;
  height: 60pt;
  font-family: Proxima Nova;
  font-size: 20pt;
  padding-left: 20pt;
}
a {
  font-family: Proxima Nova;
}
footer {
  background-color: var(--registry-blue);
  color: white;
  font-size: 12pt;
  font-family: Proxima Nova;
  margin-top: auto;
  padding: 15pt;
}
.form-submit-button {
  background: var(--registry-blue);
  color: white;
  font-weight: bold;
  padding: 0;
}
.div-input-login {
  padding: 13pt;
}
#div-logo {
  padding: 5pt;
}
#div-logo-title {
  font-size: 27pt;
  font-family: Aleo;
  color: var(--registry-blue);
  margin-top: -10pt;
}
#div-directions {
  font-size: 30pt;
  font-family: Aleo;
  font-weight: bold;
  padding-top: 15pt
}
#div-forgot-password {
  padding-top: 17pt;
  padding-bottom: 75pt;
}
#div-forgot-password a:link {
  font-size: 25pt;
  color: var(--registry-blue);
}
#div-footer-links a:link {
  color: white;
}
#img-logo {
  max-width: 112px
}
/****************************************
END styles
****************************************/


/****************************************
BEGIN responsive: desktop vs mobile
****************************************/
/* NOTE if changing min-width & max-width see "responsive: desktop vs mobile" in login.css & login.html */
/* NOTE desktop min-width and mobile max-width are 1px difference */
/* desktop */
@media only screen and (min-width: 1280px) {
  .mobile {
    display: none
  }
  #div-logo {
    background-color: var(--registry-blue);
  }
  #span-logo-title {
    font-size: 27pt;
    font-family: Aleo;
    color: white;
    vertical-align: middle;
    padding-left: 7pt;
  }
} 
/* mobile*/
@media only screen and (max-width: 1279px) {
  .desktop {
    display: none
  }
  #div-logo {
    background-color: white;
  }
}
/****************************************
END responsive: desktop vs mobile
****************************************/