@import url('https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap');
body{
  font-family: 'Jost', sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h2{
  color:#000;
  text-align:center;
  font-size:2em;
}
.warpper{
  flex-direction: column;
  align-items: center;
  margin: 5vh 0vw 0vh 5vw;
}
.tab-azul{
  cursor: pointer;
  padding:10px 20px;
  background:#3856F8;
  display:inline-block;
  color:#fff;
  border-radius:7px 7px 0px 0px;
  width: 10vw;
}
.tab-vermelho{
  cursor: pointer;
  padding:10px 20px;
  margin:0px 2px;
  background:#F95E3E;
  display:inline-block;
  color:#fff;
  border-radius:7px 7px 0px 0px;
  width: 10vw;
}
.tab-amarelo{
  cursor: pointer;
  padding:10px 20px;
  margin:0px 2px;
  background:#F8BA1B;
  display:inline-block;
  color:#fff;
  border-radius:7px 7px 0px 0px;
  width: 10vw;
}
.tab-rosa{
  cursor: pointer;
  padding:10px 20px;
  margin:0px 2px;
  background:#F89EDA;
  display:inline-block;
  color:#fff;
  border-radius:7px 7px 0px 0px;
  width: 10vw;
}
.panels{
  background:#FCF7CF; 
  min-height:200px;
  width:100%;
  max-width:90vw;
  border-radius:0px;
  overflow:hidden;
}
.panel{
  display:none;
  animation: fadein .8s;
  background-color: #FCF7CF;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.panel-title{
  font-size:1.5em;
  font-weight:bold
}
.radio{
  display:none;
  font-family: 'Jost';
}
#one:checked ~ .panels #one-panel{
  display:block;
  font-family: 'Jost';
  border-top:#3856F8 3px solid;
}

#two:checked ~ .panels #two-panel{
  display:block;
  font-family: 'Jost';
  border-top:#F95E3E 3px solid;
}


#three:checked ~ .panels #three-panel{
  display:block;
  font-family: 'Jost';
  border-top:#F8BA1B 3px solid;
}

#four:checked ~ .panels #four-panel{
  display:block;
  font-family: 'Jost';
  border-top:#F89EDA 3px solid;
}

/*
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab,
#four:checked ~ .tabs #four-tab{
  
}
*/
.tabs{
    width: 90vw;
    font-size: 1.25em;
}

#barra-azul-topo{
    border-top:#3856F8 3px solid;
}

#barra-vermelho-topo{
    border-top:#F95E3E 3px solid;
}

#barra-rosa-topo{
    border-top:#F89EDA 3px solid;
}

#barra-amarelo-topo{
    border-top:#F8BA1B 3px solid;
}

.tab-amarelo:hover{
  background-color: #EDAC07;
}

.tab-azul:hover{
  background-color: #092BEC;
}

.tab-rosa:hover{
  background-color: #F78DD4;
}

.tab-vermelho:hover{
  background-color: #F84825;
}