.tab-warpper{ width: 100%;
  display: flex;
  flex-direction:column;
  align-items: center;
}
.tabs{
    width: 100%; padding: 0; margin: 0;
    display: flex;
}

.tab{
  cursor: pointer; text-align: center;
  padding:2% 0% !important; width:100%;
  margin: 0px 2px; margin:0;
  background:rgba(0,0,0, 0);
  display:inline-block; line-height: 30px;
  color: #fff; font-size: 18px;
  border-radius: 5px 5px 0px 0px; border: 1px solid rgba(0,0,0, 0.4); border-bottom: 0;
}
@media screen and (min-width: 200px) {
    .tab{ font-size: 14px !important;}    
}
.panels{
  background:rgba(0,0,0, 0.1); border: 1px solid rgba(0,0,0, 0.4); border-top: 0;
  height: auto; 
  min-height: 300px;
  width: 99.8%; margin: 0px 0 0 0;
  border-radius:0 0 5px 5px;
  overflow: hidden;
  padding:0;
}

.panel { padding: 0;
  display: none;
  animation: fadein 1.8s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.panel-title {
  font-size: 2em;
  font-weight: bold;
}

.radio {
  display: none;
}

#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel {
  display: block; 
}

#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab {
  background:rgba(0,0,0, 0.3);
  color: #fff; box-shadow: 0; border-radius: 3px 3px 0px 0px; border: 1px solid rgba(0,0,0, 0.4); border-bottom:0;
  
}