nav {
   width: 100%;
   margin: 0 auto;
   background-color: #555555;
   text-align: center;
   font-family: 'PT Serif';
   line-height: 2em;
}

.navigation {
   padding: 0;
   text-align: center;
   margin: 0;
}

.navigation li:first-child {
	display: block;
}

.navigation li {
	display: none;
}

.navigation a:hover {
	color: black;
	background-color: white;
	font-weight: bold;
}

nav ul li.active a {
   background-color: #174d73;
}

nav a {
   display: block;
   color: white;
   text-align: center;
   padding: 0.75rem;
   text-decoration: none;
   font-size: 1em;
}

header,
nav, footer {
   width: 100%;
   margin: 0 auto;
}

.responsive li {
	display: block;
}

#currentdate {
   padding: 10px;
}

header,
footer {
   background-color: #174d73;
   color: white;
}

header {
   display: flex;
   flex-flow: row;
   width: 100%;
}

header #header {
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 5px;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-right: 20px;
}

#company, #motto {
   padding-left: 30px;
   padding-right: 30px;
   line-height: 1em;
}

h1, h2, h3 {
   font-family: 'PT Serif';
}

h1 {
   font-size: 2em;
}

h2 {
   font-size: 1.5em;
   color: #174d73;
}

h3 {
   font-size: 1em;
   letter-spacing: .1em;
}

body {
   background-color: #e4e4e4;
}

main {
   padding: 20px;
}

p {
   line-height: 20px;
   font-family: 'Roboto Condensed';
}

#logo {
   height: 100px;
   border: solid #555555 2px;
   margin-left: 20px;
   margin-top: 20px;
}

footer {
   padding-bottom: 10px;
   background-color: #174d73;
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   font-family: 'PT Serif';
   color: white;
}

#title {
   text-align: center;
   color: #174d73;
}

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*------------FORM----------------*/
form fieldset {
   margin: 2rem 0;
   border: 1px solid #174d73;
   border-radius: 10px;
   padding: 20px;; 
}

form legend {
    color: #174d73;
    font-family: 'PT Serif';
    font-weight: bold;
    font-size: 1.2em;
    margin: 0 1rem;
    padding: 0 .5rem;
}

form label {
   font-family: 'Roboto Condensed';
}

form label.one {
    display: block;
    padding-top: 30px;
    color: #174d73;
}

form label.one input, form label.one select, form label.one textarea {
    -webkit-appearance: none;
    display: block;
    font-size: 1rem;
    border: solid 1px #174d73;
    border-radius: 4px;
    padding: 10px;
    margin: 2px;
    color: black;
    width: 100%;
    max-width: 20rem;
    background-color: rgba(0, 0, 0, 0.1);
}

form label.two {
    display: block;
    padding-top: 8px;
    color: #555;
    font-family: 'Roboto Condensed';
    font-size: .9em;
}

form label.two input {
   margin-left: 2px;
}

form input.push {
    border: none;
    background-color: green;
    color: white;
    border-radius: 30px;
    padding: .75rem 1.5rem;
    margin: 0 0 2rem 2%;
    width: 96%;
    max-width: 20rem;
    font-size: 1.5em;
}

.push:hover {
   box-shadow: 0 0 10px black;
}

form label.one input:required {
    border-left: red solid 6px;
}

form label.one input:required:invalid {
    border-left: red solid 6px;
}

/*----- Clearfix: Force an Element not to collapse -----*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.footnote {
   margin-left: 116px;
   color: #555;
   font-size: .9em;
   font-family: 'Roboto Condensed';
   padding-top: 2px;
}

#thanks {
   font-size: 1em;
   text-align: center;
}

#thanks p {
   font-size: 1.8em;
}

#thanks h1 {
   color: #174d73;
}

#comment { 
   margin-top: 5px;
   border-radius: 4px;
}