/* -------  Alert ------- */
/* font color */
a.alert  {
  color: white;
}
a:hover.alert {
  color: white; /* font color when hovering */
}
h3.alert {
  background-color: red; /* background color of notification banner */
  color: white; /*font color */
  padding: 18px 0px 18px 25px;
  width: 96%;
  font-variant: normal;
  font-size: 1.65em;
}
h4.alert {
  background-color: red;  /* background color of notification banner */
  color: white; /*font color */
  padding: 25px;
  width: 96%;
  margin-top: 20px;
  font-variant: normal;
  font-size: 1.5em;
}

/* ------- Notification ------- */
/* font color */
a.notification  {
  color: white;
}
a:hover.notification {
  color: white; /* font color when hovering */
}
h3.notification {
  background-color: green; /* orange color:  #F69A00;*/ /* background color of notification banner */
  color: white; /*font color */
  padding: 20px 0px 25px 25px;
  width: 96%;
  font-variant: normal;
  font-size: 1.65em;
}
h4.notification {
  background-color: green;  /* background color of notification banner */
  color: white; /*font color */
  padding: 25px;
  width: 96%;
  margin-top: 20px;
  font-variant: normal;
  font-size: 1.5em;
}

/* ------- Shared ------- */
img.alert, img.notification {
  width: 35px;
  height: 35px;
  float: left;
  margin-top: -4px;
}
.alert-box, .notification-box {
  position: absolute;
  margin-top: -13px;
  width: 100%;
}
body.context-login .notification-box, body.context-login .alert-box {
  position: absolute;
  margin-top: -20px;
}
@media screen and (max-width: 740px) {
  .alert-box, .notification-box  {
    position: relative;
    margin-top: -12px;
    margin-bottom: -11px;
    width: 100%;
  }
  body.context-login .notification-box, body.context-login .alert-box {
    position: relative;
  }
}