.tabs {
  margin: 0px 20px;
  position: relative;
  width: 100%;
}

.tabs nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /*background: #AD9897;*/
  /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);*/
  width: 300px;
  font-weight:500;
  font-size:110%;
}

.tabs nav a {
	padding: 40px 20px;
	text-align: left;
	width: 100%;
	cursor: pointer;
	border-left:5px solid #ffffff00;
	color: #cddce6;
  
}

.tabs nav a:hover,
.tabs nav a.selected {
  /*background: #6C5D5D;*/
  color: #233d56;
 /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);*/
  border-left:5px solid #2097cb;
}

.tabs .content {
  padding: 20px 0px;
  position: absolute;
  top: 0px;
  left: 260px;
  color: #6C5D5D;
  width: 0px;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.tabs .content.visible {
  padding: 20px;
  width: calc(100% - 302px);
  overflow:hidden;
  /*overflow-y:scroll;*/
  opacity: 1;
}

.tabs .content p { padding-bottom: 2px; }

.tabs .content p:last-of-type { padding-bottom: 0px; }