input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

/*fundo principal*/
.accordion-wrapper {    
    overflow: hidden;
	clear: both;
    width: 90%;
	padding: 15px 5%;
	background: rgba(0,0,0,1.00);
	border-radius: 10px;
}

/*campos*/
.accordion {
	overflow: hidden;
    width: 100%;
    color: #FFF;      
    margin-bottom: 16px;
	text-align: left;
	border-radius: 8px;
	border: solid 1px #CCC;
}
.accordion:last-child {margin-bottom: 0;}

/*fundo das perguntas*/
.accordion-label {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
}
.accordion-label:hover {}
.accordion-label::after {
    content: "\276F";
    width: 16px;
    height: 16px;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*fundo das respostas*/
.accordion-content { 
    max-height: 0;
    padding: 0 16px;
    /*background: white;*/
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.accordion-content p {margin: 0; color: #FFF; text-align: justify;}
input:checked + .accordion-label {}
input:checked + .accordion-label::after {-webkit-transform: rotate(90deg); transform: rotate(90deg);}
input:checked ~ .accordion-content {max-height: 100vh; padding: 16px;}

@media only screen and (min-width: 481px), only screen and (orientation:landscape) {
/*fundo principal*/
.accordion-wrapper {padding: 25px 5%;}
}

@media only screen and (min-width: 768px) {
/*fundo principal*/
.accordion-wrapper {padding: 35px 5%;}
}

@media only screen and (min-width: 960px) {
/*fundo principal*/
.accordion-wrapper {width: 85%; padding: 35px 7.5%;}
}