.sidepanel {
  height: 250px; 
  width: 0; 
  position: fixed; 
  z-index: 1; 
  top: 0;
  left: 0;
  background-color: #515151; 
  overflow-x: hidden; 
  padding-top: 60px; 
  transition: 0.5s; 
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  float: right;
  font-size: 20px;
  cursor: pointer;
  background-color: #515151;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
} 
body, html {
    height: 100%;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/main2.jpg");
float: right;
  width: 100%;
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: right;
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


header {
  display: block, inline;
  background: #515151;
  color: white;
  padding: 10px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  align-items: center;
}
.header {
  width:100%;
  overflow:auto;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 45px;
}
.header  div {
  width:33%;
  float:left;
}

.Logo {
  width: 50px;
  height: 50px;
  float: right
}
.About {
  align-self: center;
  padding: 20px;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}