body{ font-family: 'Raleway', sans-serif; }
h1 { text-align: center;font-size: 60px;font-family: 'Merriweather', cursive; margin-top: 0px;}
h6 {text-align: center; font-size: 20px; margin-top: -32px;}
hr { border-top: 1px dashed #8c8b8b; width: 300px; }
a { text-decoration: none; color: black; }
a:hover { text-decoration: underline; }
p { width: 70%; margin: auto; text-align: center;padding-bottom: 20px; font-size: 18px; }
#header { background-color: gold; width: 100%; position: absolute; top: 0; left: 0; height: 200px;}
#latest { text-align: center; margin-top: 220px; }
#article-header { background-color: #03A9F4; width: 100%; position: absolute; top: 0; left: 0; height: 200px; }
#article-title { text-align: center; font-size: 54px; font-family: 'Merriweather', cursive; color: white;padding-top: 50px; }
#article { margin-top: 220px;}
#logo { margin-left: auto; margin-right: auto; width: 50px; display: block; padding-top: 25px; }

/* Offline Page */
#header-offline { background-color: aquamarine; width: 100%; position: absolute; top: 0; left: 0; height: 600px;}
#logo-offline { margin-left: auto; margin-right: auto; width: 50px; display: block; padding-top: 125px; }

.showOfflineNotification { background-color: black;height: 40px;color: white;text-align: center;padding-top: 20px;font-size: 20px;margin-top: 0px;position: absolute;top: 0;left: 0;right: 0;overflow: hidden;z-index: 101; }
.showMessageNotification { background-color: black;height: 40px;color: white;text-align: center;padding-top: 20px;font-size: 20px;margin-top: 0px;position: absolute;bottom: 0;left: 0;right: 0;overflow: hidden;z-index: 101; }
.hideOfflineNotification { display:none; }

@media screen and (max-width: 550px) {
    h1 { text-align: center;font-size: 40px;font-family: 'Merriweather', cursive; margin-top: 0px;}
    #article-title { text-align: center; font-size: 40px; font-family: 'Merriweather', cursive; color: white;padding-top: 50px; }
}

.contact-form{
  margin-top: 220px;
  width: 100%;
}

input{
  font-size: 16px;
  padding: 12px 16px;
  height: 58px;
  width: 80%;
  display: block;
  border: 1px solid rgba(0,0,0,.12);
  border-bottom-width: 2px;
  border-bottom-color: #dedede;
  background: #fff;
  border-radius: 2px;
}

button{
  background: 0 0;
  border: none;
  border-radius: 2px;
  color: #000;
  height: 58px;
  margin: 6px 0 0;
  width: 60%;
  max-width: 60%;
  padding: 0 16px;
  display: inline-block;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .025rem;
  overflow: hidden;
  will-change: box-shadow;
  transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
  outline: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 58px;
  -webkit-appearance: none;
  color: black;
  background-color: gold;
  font-size: 14px;
  font-weight: 500;
}

#container {
  margin: 0 auto;
  width: 80%;
}
