@font-face {
    font-family:'L5S';
    src:url('../fonts/Lato-Semibold.woff2') format('woff2');
    font-weight:600;
    font-style:normal;
}
.content {
    grid-column: 2/3;
    display: grid;
    grid-template-areas:
    "writeus faq"
    ".       faq"
    "faqmask faqmask";
    margin-top: 20px;
    row-gap: 20px;
    column-gap: 20px;
}

.writeus {
    grid-area: writeus;
    background-color: rgba(0, 0, 0, 0.9);
    font-size: 25px;
    line-height: 21px;
    font-family: 'L5';
    padding: 20px 20px 0px 40px;
}
.writeustext {
    font-family: 'L5';
    color:#30B579;
    font-size: 14px;
    line-height: 21px;
    margin-right: 15px;
}
.writeustitle {
    color: #F4B41D;
    margin-bottom: 10px;
}
.writeus a {
    font-size: 16px;
    text-decoration: none;
    color: white;
}
.writeus a:hover {
    text-decoration: underline;
    text-decoration-color: #F4B41D;
}
.writeuslist {
    margin: 0px 10px 0px 20px;
    color: #F4B41D;
    font-size: 14px;
}

#humantears, #humantearsreflect {
    width: 85px;
    grid-column: 1/2;
    grid-row: 1/3;
    margin-top: 450px;
    margin-left: -25px;
}
#humantearsreflect {
    display: none;
}

.faq {
    grid-area: faq;
    width: 511px;

}

.faq .accordioncontent {
    color: #F4B41D;
}

.faqtitle {
    background-color: rgba(244, 180, 29, 0.2);
    color: #F4B41D;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    font-weight: 700;
    font-family: 'L5';
    height: 46px;
    padding-top: 15px;
}

.faqmask {
    grid-area: faqmask;
    justify-self: center;
}



@media screen and (max-width: 1000px)
{
    .content {
        grid-template-columns: calc(var(--currentbp_center) - 20px);
    grid-template-areas:
    "writeus"
    "faq"
    "faqmask";
    margin-left: 10px;
    margin-right: 10px;
    }
    .faq {
        width: 100%;
    }
    #humantears {
        display: none;
    }
    #humantearsreflect {
        display: block;
        margin-left: 90%;
    }
    .writeus {
        padding-left: 20px;
    }
}

@media screen and (max-width: 768px)
{
    .content {
        grid-template-columns:var(--currentbp_center);
        margin-left: 0px;
        margin-right: 0px;
    }
    .writeus {
        
        padding: 20px 10px 0px 20px;
    }
    #humantears {
        display: block;
        width: 55px;
        margin-top: 420px;
        margin-left: -10px;
        transform: none;
    }
    #humantearsreflect {
        display: none;
    }
}

@media screen and (max-width: 480px)
{
    .faqtitle {
        font-size: 18px;
    }
    .writeus {
        padding: 20px 15px 10px 25px;
    }
    .writeustitle {
        font-size: 18px;
        line-height: 22px;
        margin: 0px;
    }
    .writeus a {
        font-size: 13px;
        line-height: 16px;
    }
    .writeustext {
        font-size: 13px;
        line-height: 19px;

    }
    #humantears {
        width: 55px;
        margin-top: 480px;
        margin-left: -10px;
        transform: none;
    }
    .faqmask img {
        width: 282px;
    }
}