nav {
 margin: auto;
 width: 100%;
 max-width: 620px;
}

ul#navigation, ul#navigation ul {
 margin: 0;
 padding: 0;
 list-style-type: None;
 height: 32px;
	font-size: 12pt; 
}

ul#navigation li {
 float: Left;
 width: 151px;
 position: Relative;
	font-size: 12pt; 
}

ul#navigation li a {
 display: Block;
 width: 150px;
 line-height: 30px;
 text-align: Center;
 color: #FFFFFF;
 text-decoration: None;
 background-color: #456E9C;
 border: 1px Solid #456E9C;
 border-bottom: 0;
 transition: background-color 0.5s;
}

ul#navigation li a:hover,
 ul#navigation li a:active {
 background-color: #6DABEE;
 cursor: Pointer;
}

ul#navigation li ul {
 opacity: 0.0;
 visibility: Hidden;
 position: Absolute;
 left: 0px;
 top: 31px;
 z-index: 100;
 transition: Opacity 1s;
}

ul#navigation li:hover > ul,
 ul#navigation li:active > ul {
 opacity: 1.0;
 visibility: Visible;
}

ul#navigation li ul a {
 background-color: #456E9C;
}

/* Smartphone Menu */
#burger {
 display: None;
}

@media screen and (max-width: 700px) {
  ul#navigation li,
  ul#navigation li a {
  width: 100%;
 }

 #burger {
  display: Block;
  margin-right: 25px;
  -moz-appearance: None;
  -webkit-appearance: None;
  width: 125px;
  height: 25px;
/*  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQAAAAATS5MPAAAAAnRSTlMAAHaTzTgAAAAUSURBVHjaY2DAC/7///8HN0EzvQD48y+tFbUTjAAAAABJRU5ErkJggg=="); */
  background-image: url("navigation.png");
  background-size: 125px 25px;
  background-position: Center Center;
  background-color: #456E9C;
  vertical-align: Middle;
  outline: None;
  cursor: Pointer;
 }

 #burger:checked ~ ul#navigation {
  animation: fadeIn 1.2s;
  display: Block;
  margin-top: 5px;
 }

 #burger:not(:checked) ~ ul#navigation {
  display: None;
 }

 @keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
 }

}

h1, p {
 clear: Left;
}