.intro {
    font-size: 1.1em;
    text-align: justify;
    
    margin-bottom:2em;
}

#esomar{
    font-size:1.35em;
    font-weight:bold;
}


#question {
    color: #000000;
    font-size: 17px;
    text-align: justify;
    line-height: 1.3em;
    padding: 0 20px 10px 20px;
    text-decoration: none;
}

    #question:hover {
        text-decoration: underline;
        cursor: pointer;
        padding: 0 20px 10px 20px;

    }

.questionetfleche {
    display: flex;
    background-color: #f2f2f2;
    margin-bottom: 1em;
}

#fleche {
    margin-top: 10px;
    height: 10px;
    width: 60px;
}

    #fleche .icon-angle-down {
        height: 100px;
        width: 80px;
    }

#icon-angle-down {
    float:right;
    margin-bottom:15px;
}

#titresection {
    font-size: 1.35em;
    font-weight: bold;
}

#buttonquestion {
    width: 100%;
    height: 100%;
    border-radius: 0px;
    border: 0px solid;
    background-color: #f2f2f2;
}
    #buttonquestion p {
        text-align: justify;
        font-size: 1.3em;
        padding: 10px;
        margin: 0px;
        font-weight: bold;
    }




@media only screen and (min-device-width : 100px) and (max-device-width : 667px) {
    #demo1, #demo2, #demo3, #demo4, #demo5, #demo6, #demo7, #demo8, #demo9, #demo10, #demo11, #demo12, #demo13, #demo14, #demo15, #demo16, #demo17, #demo18, #demo19, #demo20, #demo21, #demo22, #demo23, #demo24, #demo25, #demo26, #demo27, #demo28 {
        margin-top: 10px;
        text-align: justify;
    }
    #icon-angle-down {
        float: none;   
    }
}