* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body{
	font-family: "Roboto", sans-serif;
	background-color: #042331;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 16px;
  text-align: left;
}

.sidebar{
	left: 0;
	height: auto;
	flex: 50%;
	width: 50%;
	background-color: #042331;
	border: 2px solid black;
}

.sidebar header{
	font-size: 22px;
	color: black;
	text-align: center;
	line-height: 55px;
	background: #D6DDE6;
}

.sidebar ul a {
	display: block;
	height: 100%;
	width: 100%;
	line-height: 42px;
	font-size: 14px;
	color: white;
	text-align: left;
	padding-left: 10px;
	box-sizing: border-box;
	border-top: 1px solid rgba(255,255,255, .1);
	border-bottom: 1px solid black;
	transition: .4s;
}

.kmap {
   background-color: #042331; /*alternate color #D6DDE6;*/
   padding: 10px;
   flex: 50%;
   border: 2px solid black;
}
	
	
ul li:hover a {
	padding-left: 30px;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
  .sidebar {
  width:100%;
  }
  .kmap {
   width: auto;
   background-color: #042331;
}