body {
  padding: 20px;
  background: #b0dbf13d;
}

.tabs {
  max-width: 800px;
  margin-top: 20px;
  padding: 0px;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs label {
  display: inline-block;
  padding: 6px 0 6px 0;
  margin: 0 -2px;
  width: 25%;
  /* =100/tabs number */
  border-bottom: 3px solid #13964A;
  text-align: center;
  font-weight: bold;
  color: #E57200;
}
.tabs label:hover {
  cursor: pointer;
}
.tabs input:checked + label {
  border: 3px solid #13964A;
  color: #2A80B9;
  border-width: 3px 3px 0 3px;
}
.tabs #tab1:checked ~ .content #content1,
.tabs #tab2:checked ~ .content #content2,
.tabs #tab3:checked ~ .content #content3,
.tabs #tab4:checked ~ .content #content4 {
  display: block;
}
.tabs .content > div {
  display: none;
  padding-top: 20px;
  text-align: left;
  /*height: 192px;*/
  overflow: auto;
}


.article {
  padding: 5% 20% 0 0;
}