.faq-container {
     width:70%;
     margin:0 auto;
     padding-left:30px;
    /* border:2px solid orange;
     */
     padding:50px 0 60px 30px;
}
/* this gives the answer text its color and space the paragraph */
 .answer ul, .answer li {
     list-style-type: none;
     display:inline-block;
     background-color:#FFFEF8;
     color:#113f11;
     font-weight: 400;
     line-height:1.4rem;
     padding:8px 8px 0 8px;
}
.answer ul li p {
    font-size:1rem;
}
 .faq-container ul li {
     list-style-type:none;
}
 .faq-container h1 {
     font-size:1.3rem;
     color:#225F32;
}
/* symbol in front of question before clicking */
 .accordion-container label:before{
     content:' \27A4 ';
     color:#2B7139;
     color: #766730;
     display: block;
     position: relative;
     max-width: 1px;
     max-height: 1px;
     text-indent:-30px;
     padding-top:20px;
     font-size:1.1rem;
}
/* symbol in front of question when the answer box is opened */
 .accordion-container input:checked + label::before {
     content:' \2934 ';
     color:#2B7139;
     color: #766730;
     color:#225F32;
}
/* this hides the checkboxes */
 .accordion-container input{
     display: none;
}
/* this keeps the answer paragraphs closed until clicked */
 .accordion-container .answer {
     margin-top: -1px;
     overflow: hidden;
     height: 0;
     position: relative;
     z-index: 10;
}
/* supposed to determine transition time for opening, closing but seems not to work */
 .accordion-container .answer {
     -webkit-transition: height 0.5s ease-in-out, box-shadow 0.6s linear;
     -moz-transition: height 0.5s ease-in-out, box-shadow 0.6s linear;
     -o-transition: height 0.5s ease-in-out, box-shadow 0.6s linear;
     -ms-transition: height 0.5s ease-in-out, box-shadow 0.6s linear;
    
    /* transition: height 0.15s ease-in-out, box-shadow 0.16s linear;
     box-shadow: none;
}
 .accordion-container input:checked ~ article{
    /* -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
     -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
     -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
     -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
     transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
     box-shadow: none;
     */
}
/* important;
 this displays the size of the answer box. Without the dimensions, it would collapse */
 .accordion-container input:checked ~ .answer {
     height:auto;
     margin:3px 10px 10px 0;
}
/* question colour when unchecked */
 .accordion-container label {
     font-size:1.1rem;
     color: #766730;
    /* color:#225F32;
     */
     /* line-height: 1.6rem; */
     font-weight:600;
}
/* question colour when checked */
 .accordion-container input:checked + label {
     color: #766730;
     color:#225F32;
}
/* ============================================*/
/* Media Queries up to 900px */
/* ============================================*/
 @media(max-width:760px) {
     .faq-container {
         width:80%;
    }
}
/* ============================================*/
/* Media Queries up to 760px */
/* ============================================*/
 @media(max-width:760px) {
     .answer ul, .answer li {
         margin:0;
         padding:0;
         padding-top:8px;
    }
     .faq-container {
         width:90%;
    }
}