/* Acordeon styles */
.tab {
  font-family: 'Barlow', sans-serif;
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color:#000;
  font-size:21px;
  overflow: hidden;
}
input.acc {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label.acclab {
  position: relative;
  display: block;
  padding: 0 0 0 30px;
  background: transaprent;
  font-weight: 500;
  height: 35px;
  line-height:22px;
  cursor: pointer;
  margin:0 0 0 0;
}
.blue label {background: transaprent;color:#000;}
.blue label:hover {background: transaprent;color:#33abaf;}

.tab-content {
  max-height: 0;
  margin:-5px 0 10px 0;
  overflow: hidden;
  background: transaprent;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  font-weight: 500;
  font-size:16px;
  padding:0 30px 0 30px;
}
.blue .tab-content {
  background: transaprent;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 8em;          
}
/* Icon */
label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 30px;

  text-align: left;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
  color:#000;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\f0da";
  font-family: 'Font Awesome 5 Pro';
  font-weight:900;
}
input[type=checkbox]:checked + label::after {
  content: "\f0d7";
  font-family: 'Font Awesome 5 Pro';
  font-weight:900;
}
input[type=radio]:checked + label::after {
  content: "\f0d7";
  font-family: 'Font Awesome 5 Pro';
  font-weight:900;
}

/* some mobile stuff */
@media only screen and (min-width: 320px) and (max-width: 479px){

.tab {font-size:16px;}

label.acclab {height: 35px;}
label::after {height: 35px;}
                                         
.tab-content {margin:10px 0 10px 0;padding:0 0 0 0;font-size:16px;}

/* :checked */
input:checked ~ .tab-content {
  max-height: 14em;
}


}

@media only screen and (min-width: 480px) and (max-width: 767px){

.tab {font-size:16px;}
.tab-content {padding:0 30px 0 30px;margin:10px 0 10px 0;font-size:16px;}

label.acclab {line-height: 3;}
label::after {height: 3em;line-height: 3;}

/* :checked */
input:checked ~ .tab-content {
  max-height: 12em;
}

}


@media only screen and (min-width: 950px) and (max-width: 1180px){

.tab {font-size:17px;}
.tab-content {padding:0 30px 0 30px;margin:10px 0 10px 0;font-size:17px;}

label.acclab {line-height: 3;}
label::after {height: 3em;line-height: 3;}

/* :checked */
input:checked ~ .tab-content {
  max-height: 12em;
}

}