.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 20px;
  border-radius: 10px 10px 0 0;
  width: 100%;
}

.radiotab {
  position: absolute;
  opacity: 0;
}

.label4,
.label3,
.label {
  width: 100%;
  padding: 12px 10px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #7f7f7f;
  transition: background .3s, color .3s;
  border: none;
  border-radius: 0;
  text-align: center;
}

.label3:hover,
.label4:hover,
.label:hover {
  background: #d8d8d8;
}

.label3:active,
.label4:active,
.label:active {
  background: #ccc;  
}
.radiotab + .label3,
.radiotab + .label4,
.radiotab + .label {
  border-top: solid 1px #aaa;
  border-left: solid 1px #aaa;
  border-right: solid 1px #aaa;
}
.radiotab:checked + .label3,
.radiotab:checked + .label4,
.radiotab:checked + .label {
  background: #fff;
  color: #000;
  border-top: solid 2px #000;
  border-left: solid 2px #000;
  border-right: solid 2px #000;
  border-bottom: none;
}

.panel {
  display: none;
  padding: 10px 15px 15px;
  background: #fff;
  width: 100%;
  border-left: solid 2px #000;
  border-bottom: solid 2px #000;
  border-right: solid 2px #000;
}

.radiotab:checked + .label3 + .panel,
.radiotab:checked + .label4 + .panel,
.radiotab:checked + .label + .panel {
  display: block;
}

@media (min-width: 600px) {
  .panel {
    order: 99;
  }

  .label4,
  .label {
    width: 25%;
    border-radius: 10px 10px 0 0;
    border-bottom: solid 2px #000;
  }
  .label3 {
    width: calc(100% / 3);
    border-radius: 10px 10px 0 0;
    border-bottom: solid 2px #000;
  }
}




.ttabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 20px;
  border-radius: 10px 10px 0 0;
  width: 100%;
  /*
  flex-grow: 1;
  flex-basis: 0;
  */
}

.tradiotab {
  position: absolute;
  opacity: 0;
}

.tlabel {
  width: 100%;
  padding: 12px 10px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  color: #7f7f7f;
  transition: background .3s, color .3s;
  border: none;
  border-radius: 0;
  text-align: center;
}

.tlabel:hover {
  background: #d8d8d8;
}

.tlabel:active {
  background: #ccc;  
}

.tradiotab + .tlabel {
  border-top: solid 1px #aaa;
  border-left: solid 1px #aaa;
  border-right: solid 1px #aaa;
}
.tradiotab:checked + .tlabel {
  background: #fff;
  color: #000;
  border-top: solid 2px #000;
  border-left: solid 2px #000;
  border-right: solid 2px #000;
  border-bottom: none;
}

.tpanel {
  display: none;
  padding: 10px 15px 15px;
  background: #fff;
  width: 100%;
  border-left: solid 2px #000;
  border-bottom: solid 2px #000;
  border-right: solid 2px #000;
}

.tradiotab:checked + .tlabel + .tpanel {
  display: block;
}

@media (min-width: 600px) {
  .tpanel {
    order: 99;
  }

  .tlabel {
    width: calc(100% / 3);
    border-radius: 10px 10px 0 0;
    border-bottom: solid 2px #000;
  }
}