.clearfix:before, .tabs:before, .tabs-content:before, .clearfix:after, .tabs:after, .tabs-content:after {
  content: " ";
  display: table;
}
.clearfix:after, .tabs:after, .tabs-content:after {
  clear: both;
}

.tabs .tab-title {
  position: inherit;
  float: none;
  display: block;
  top: auto;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}
.tabs .tab-title > a {
  display: block;
  color: #222;
  text-decoration: none;
    padding: 15px;
}
.tabs .tab-title > a:hover {
  background-color: #f2f2f2;
}
.tabs .tab-title.active > a, .tabs .tab-title.active > a:hover {
  background-color: #f2f2f2;
    padding: 15px;
}

.tabs.vertical {
  margin: 0;
  padding: 0;
  float: left;
  width: 27%;
}

.tabs-content {
  width: 90%;
  margin-left: 8%;
}

.tabs-content > .content {
  display: none;
  margin-left: 20%;
  padding: 0 12px;
  box-sizing: border-box;
}
.tabs-content > .content.active {
  display: block;
  background-color: #f2f2f2;
}