html, body {
  background-color: #3385b6;
  background-image: url("moulin.png");
  margin: 0;
  font-family: 'roboto', sans-serif;
}

h4 {
  font-size: 150%;
}
#content{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
}
#wrapper {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 8fr 7fr;
  grid-template-columns: 1fr 8fr 7fr;
  grid-template-areas:
      "icons banner logon";
  height: 65vh;
  max-width: 1024px;
}

#icons {
  margin: auto 0px;
  grid-area: icons;
  background-color: white;
  height: 85%;
}

#banner {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  background: no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*
  Low res image loads quickly, then gets replaced;
  The background color helps lessen flicker if you pick one close to the image hue,
  which can be computed at http://mkweb.bcgsc.ca/color-summarizer/?analyze
  */
  background-color: white;
}

#hr_banner {
  height: 100%;
  width: 100%;
  background: no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#logon {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
  margin: auto;
  background-color: white;
  height: 85%;
  width: 100%;
}

.logon__errors,
.logon__misc-text {
    margin-top: 1rem;
    font-size: 0.8rem;
}

.logon__error {
    color: #ffa500;
}

.logon__title,
.logon__field,
.logon__link {
    display: block;
    width: 100%;
}

.logon__fields {
  margin-top: 1rem;
}

.logon__field:first-child {
    margin-top: 0;
}

.logon__field {
    margin-top: 0.5rem;
}

.logon__title {
    font-size: 1.5rem;
    font-weight: bold;
}

.logon__buttons {
    margin: 1.5rem 0;
}

.logon__link {
    padding-top: 0.5rem;
}

ul {
  text-align: center;
  width: 100%;
  padding: 0px;
  list-style: none;
  margin: 40px auto;
}

ul > li {
  margin: 0 auto;
  padding: 10px;
  border-left: 4px solid transparent;
}

li:hover {
  border-left: 4px solid lightblue;
}

svg {
  fill: #3385b6;
}

form {
  margin: 1.5rem;
  width: 90%;
  height: 90%;
  font-size: 0.9rem;
}

span {
  color: lightgrey;
  font-size: 80%;
}

h4 {
  margin: 0px 25px;
  padding: 10px 0;
}

p {
  margin: 25px 25px 0 25px;
  font-size: 13px;
  width: 100%;
}


p.error {
  margin-top: 10px;
}

form > a {
  color: #3385b6;
}

footer {
  right: 0;
  bottom: 0;
  position: absolute;
}

footer > p {
  color: white;
  margin: 2px 0;
}

footer > p > a {
  color: white;
}

.error {
  color: orange;
}

/*==================================================
 * Resize the foreground for smaller screens
 * ===============================================*/

@media only screen and (max-width: 600px) {

  body #banner {
    width: 0px;
    background: lightblue;
    background-image: none !important; /* overrides the in-line style */
  }

  #wrapper {
    -ms-grid-columns: 1fr 0fr 7fr;
    grid-template-columns: 1fr 0fr 7fr;
    grid-template-areas:
        "icons banner logon";
  }
}

@media only screen and (max-height: 675px) {
  #wrapper {
    height: 100%;
  }
}

@media only screen and (max-height: 715px) and (min-height: 675px) {
  #error {
    display: none;
  }
}

@media only screen and (max-height: 475px) {
  #error {
    display: none;
  }

  #icons {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    margin-bottom: 0;
    height: 100%;
  }

  #logon {
    margin-top: 0;
    height: 100%;
  }

  footer > p, footer > p > a {
    color: blue;
  }

}

@media only screen and (max-height: 400px) {
  p {
    margin: 0px 25px;
    font-size: 13px;
  }

  p.error {
    margin: 0px 25px 0px 25px;
  }

  h4 {
    padding: 2px 0;
  }
}

@media only screen and (max-height: 850px) {

  body form > p {
    margin: 10px 25px;
  }

  #icons ul {
    margin: 10px auto;
  }
}

/*==================================================
 * Box-shadow for the foreground
 * ===============================================*/
.shadow
{
  position:relative;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow:before, .shadow:after
{
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:10px;
  bottom:10px;
  left:0;
  right:0;
  -moz-border-radius:100px / 10px;
  border-radius:100px / 10px;
}
.shadow:after
{
  right:auto;
  left:auto;
  -webkit-transform:skew(8deg) rotate(3deg);
  -moz-transform:skew(8deg) rotate(3deg);
  -ms-transform:skew(8deg) rotate(3deg);
  -o-transform:skew(8deg) rotate(3deg);
  transform:skew(8deg) rotate(3deg);
}

button {
  border: none;
  background: #3385b6;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  width: 100%;
  color: white;
  margin: 0.5rem 0;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}
button:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
}

a {
  color: #039be5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

input[type=text]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=password]:not(.browser-default) {
  width: 100%;
}

/** The logon page is doing some weird stuff with the password field,
so override the usual style */
input[type=password]:not(.browser-default):disabled,
input[type=password]:not(.browser-default)[readonly="readonly"] {
  color: #9e9e9e !important;
  border-bottom: 1px solid #9e9e9e !important;
}

/* Target IE 10 and 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #wrapper{
    position: relative;
    margin: inherit;
    right: inherit;
    left: inherit;
    top: inherit;
    bottom: inherit;
  }

  form{
    margin-bottom: 200px;
  }
}