.warpper{
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding-top: 1rem;
}
.panels, .panels2, .panels3, .panels4{
  box-shadow: 0 2rem 2rem #00000080;
  color: white;
  min-height: 27rem;
  max-height: 27rem;
  overflow-y: auto;
  overflow-x: hidden;
  width:100%;
  max-width:70%;
  border-radius:3px;
  padding-right: 1rem;
  flex-grow: 1;
  text-align: justify;
  font-family: NotoSans-Regular;
  font-size: 1.2rem;
}
p{
  margin-bottom: -1vh;
  line-height: 3.4vh;
  font-size: 2.7vh;
}
h6{
  font-size: 1.4rem;
    line-height: 0vh;
    font-family: 'Cinzel-Black';
    margin-bottom: 1vh;
}
.tabs{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-grow: 0;
  width: 100%;
  justify-content: flex-start;
  text-align: center;
  padding-left: 2rem;
  font-family: 'Cinzel-SemiBold';
}
.tab1{
  cursor: pointer;
  padding: 25px 10px;
  margin-bottom: 1rem;
  background:#ffffff;
  color:#8100B3;
  display:inline-block;
  border-radius:3px 3px 0px 0px;
}
.tab1:hover{
  cursor: pointer;
  background:#8100B3;
  color:white;
}
/* 2do tab */
.tab2{
  cursor: pointer;
  padding: 31px 15px;
  margin-bottom: 1rem;
  background:#ffffff;
  color:#8100B3;
  display:inline-block;
  border-radius:3px 3px 0px 0px;
}
.tab2:hover{
  cursor: pointer;
  background:#64B57B;
  color:white;
}
/* tercer tab */
.tab3{
  cursor: pointer;
  padding: 31px 15px;
  margin-bottom: 1rem;
  background:#ffffff;
  color:#8100B3;
  display:inline-block;
  border-radius:3px 3px 0px 0px;
}
.tab3:hover{
  cursor: pointer;
  background:#E36F24;
  color:white;
}
/* cuarto tab */
.tab4{
  cursor: pointer;
  padding: 31px 15px;
  margin-bottom: 1rem;
  background:#ffffff;
  color:#8100B3;
  display:inline-block;
  border-radius:3px 3px 0px 0px;
}
.tab4:hover{
  cursor: pointer;
  background:#e324b3;
  color:white;
}
.panel{
  display:none;
  animation: fadein .8s;
}
.panel-title{
  font-size:1.5em;
  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{
  color:rgb(255, 255, 255);
  background-color: #8100B3;
}
.panels::-webkit-scrollbar {
  width: 8px;
  background-color: #eee;
}
.panels::-webkit-scrollbar-thumb {
  background-color: #8100B3;
}

/* segundo periodo */
#two1:checked ~ .panels2 #two-panel1,
#two2:checked ~ .panels2 #two-panel2,
#two3:checked ~ .panels2 #two-panel3{
  display:block
}
#two1:checked ~ .tabs #two-tab1,
#two2:checked ~ .tabs #two-tab2,
#two3:checked ~ .tabs #two-tab3{
  background:#64B57B;
  color:white;
}
.panels2::-webkit-scrollbar {
  width: 8px;
  background-color: #eee;
}
.panels2::-webkit-scrollbar-thumb {
  background-color: #64B57B;
}
/* tercer */
  /* 3.1 */
  #Onethre1:checked ~ .panels3 #OneThre-panel1,
  #Onethre2:checked ~ .panels3 #OneThre-panel2,
  #Onethre3:checked ~ .panels3 #OneThre-panel3{
    display:block
  }
  #Onethre1:checked ~ .tabs #OneThre-tab1,
  #Onethre2:checked ~ .tabs #OneThre-tab2,
  #Onethre3:checked ~ .tabs #OneThre-tab3{
    background:#E36F24;
    color:white;
  }
  /* 3.2 */
  #Twothre1:checked ~ .panels3 #TwoThre-panel1,
  #Twothre2:checked ~ .panels3 #TwoThre-panel2{
    display:block
  }
  #Twothre1:checked ~ .tabs #TwoThre-tab1,
  #Twothre2:checked ~ .tabs #TwoThre-tab2{
    background:#E36F24;
    color:white;
  }
  /* 3.3 */
  #Threthre1:checked ~ .panels3 #ThreeThre-panel1,
  #Threthre2:checked ~ .panels3 #ThreeThre-panel2{
    display:block
  }
  #Threthre1:checked ~ .tabs #ThreeThre-tab1,
  #Threthre2:checked ~ .tabs #ThreeThre-tab2{
    background:#E36F24;
    color:white;
  }
  /* 3.4 */
  #Fourthre1:checked ~ .panels3 #FourThre-panel1,
  #Fourthre2:checked ~ .panels3 #FourThre-panel2{
    display:block
  }
  #Fourthre1:checked ~ .tabs #FourThre-tab1,
  #Fourthre2:checked ~ .tabs #FourThre-tab2{
    background:#E36F24;
    color:white;
  }

  .panels3::-webkit-scrollbar {
    width: 8px;
    background-color: #eee;
  }
  .panels3::-webkit-scrollbar-thumb {
    background-color: #E36F24;
  }
/* cuarto */
#four1:checked ~ .panels4 #four-panel1,
#four2:checked ~ .panels4 #four-panel2,
#four3:checked ~ .panels4 #four-panel3{
  display:block
}
#four1:checked ~ .tabs #four-tab1,
#four2:checked ~ .tabs #four-tab2,
#four3:checked ~ .tabs #four-tab3{
  background:#e324b3;
    color:white;
}
.panels4::-webkit-scrollbar {
  width: 8px;
  background-color: #eee;
}
.panels4::-webkit-scrollbar-thumb {
  background-color: #e324b3;
}
@media (min-width: 600px) {
  .warpper {
    flex-direction: row;
  }
  .panels {
    flex-grow: 1;
  }
  .tabs {
    flex-grow: 0;
    width: 30%;
  }
}
@media (max-width:600px) {
  .panels, .panels2, .panels3, .panels4{
    max-width:100%;
    height: 19rem;
    min-height: 19rem;
    max-height: 18rem;
    font-size: 1rem;
  }

  .tab1, .tab2, .tab4{
    padding: 7px 9px;
    margin-bottom: 3px;
    font-size: 0.7rem;
  }
  .tabs{
    padding-left: 0rem;
    font-size: 0.6rem;
  }
  .tab3 {
    padding: 7px 0px;
    margin-bottom: 0rem;
    margin-top: 1vh;
  }
  p{
    margin-bottom: -1vh;
  }
  h6{
    font-size: 1rem;
      line-height: 0vh;
      font-family: 'Cinzel-Black';
      margin-bottom: 1vh;
  }
}