b {
font-weight:strong;
	padding:3px;
}

.panels{
  background:#e6e6e6 url(/images/pappbg.png);
  height:500px;
  width:100%;
  max-width:480px;
  border-radius:3px;
  overflow:hidden;
  padding:20px;
}

.panel{
  display:none;
  animation: fadein .8s;
}

@keyframes fadein {
    from {
        opacity:0;
}

to {
        opacity:1;
}


}

.radio{
  display:none;
}

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

#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#four:checked ~ .tabs #four-tab,
#five:checked ~ .tabs #five-tab,
#three:checked ~ .tabs #three-tab{
  background:#fffffff6;
  color:#000;
  border-top: 3px solid #000;
}

:root {
--coloo:#818733
}

.relbas {
border:1px solid #ccc;width:450px;height:600px;position:relative;margin:0 auto;overflow:hidden;background:#f2f2f2;
}

.charleiste2 {
display:flex;flex-direction:column;text-transform:uppercase;font-size:8px;letter-spacing:1px;text-align:center;justify-content:center;box-sizing:border-box;z-index:9; margin-top:45px;
}

.charleiste2 span {
font-family: Merriwether sans, sans-serif; font-size: 12px !important; color: #33606e; text-transform:uppercase; letter-spacing:2px; font-weight:bold;
}

.charleiste2 label {
background:#d6d6d6;width:80px;padding:10px 0;color:var(--coloo);transition:1s ease;border:1px solid #cacaca;margin-bottom:1px;
}

.charleiste2 label:hover {
background:var(--coloo);color:#1c1c1c;transition:1s ease;
}

.charleiste2 label {
cursor:pointer;
}

.charleiste3 {
display:flex;flex-direction:row;text-transform:uppercase;font-size:8px;letter-spacing:1px;text-align:center;justify-content:center;box-sizing:border-box;z-index:9; margin-top:3px;
}

.charleiste3 span {
font-family: Merriwether sans, sans-serif; font-size: 12px !important; color: #33606e; text-transform:uppercase; letter-spacing:2px; font-weight:bold;
}

.charleiste3 label {
background:#d6d6d6;width:80px;padding:10px 0;color:var(--coloo);transition:1s ease;border:1px solid #cacaca;margin-bottom:1px;
}

.charleiste3 label:hover {
background:var(--coloo);color:#1c1c1c;transition:1s ease;
}

.charleiste3 label {
cursor:pointer;
}

.charleiste1 {
display:flex;flex-direction:column;text-transform:uppercase;font-size:8px;letter-spacing:2px;text-align:center;justify-content:center;box-sizing:border-box;z-index:9;
}

.charleiste1 span {
font-family: Merriwether sans, sans-serif; font-size: 9px !important; color: #33606e; text-transform:uppercase; letter-spacing:1px; font-weight:bold;
}

.charleiste1 label {
background:#d6d6d6;width:80px;padding:15px 0;color:var(--coloo);transition:1s ease;border:1px solid #cacaca;margin-bottom:1px;
}

.introtrotro {
overflow:hidden;
}

.iconn {
top:10px; float:right;
}

.charname {
margin-top: 8px;height: 30px;width:180px;font-family:poppins;color:var(--coloo);font-size:16px;text-transform:uppercase;font-weight:600;line-height:10px;text-align:right; float:right; padding-right:20px;
}

.charname2 {
margin-top: 8px;height: 30px;width:180px;font-family:poppins;color:var(--coloo);font-size:16px;text-transform:uppercase;font-weight:600;line-height:10px;text-align:left; float:left;
}