@media screen and (max-width: 640px) {

    .container {
        padding-right: 5px;
        padding-left: 5px;
    }

    #ai-content, #ai-search-content {
        height: calc(100% - 130px);
    }

    /***************************************************************/
    /*********************      HEADER      ************************/
    /***************************************************************/
    
    header {
        height: 50px;
    }
    
    header #ai-header-content {
        padding: 15px 7.5px;
    }

    header #logo {
        width: 60px;
        margin-left: 0px;
    }

    header h1 {
        font-size: 1rem;
    }

    #ai-search-icon {
        font-size: 15px;
        line-height: 35px;
        width: 35px;
        height: 35px;
    }

    /***************************************************************/
    /*********************      SEARCH      ************************/
    /***************************************************************/

    #ai-search-header {   
        padding: 5px;
    }

    #ai-search-header-wrap {
        padding: 0 2.5px;
    }

    #ai-search-input {
        padding: 10px;
    }

    #ai-search-clear {
        right: 4px;
        top: 2px;
        font-size: 15px;
        line-height: 38px;
        width: 38px;
        height: 38px;
    }

    /***************************************************************/
    /*********************      BREADCRUMB      ********************/
    /***************************************************************/
    
    #ai-breadcrumb {
        padding: 0;
        margin-top: 50px;
    }

    #ai-ariane {
        overflow-x: auto;
    }

    .ai-ariane-element-show {
        display: inline;
        font-size: 0.8rem;
        padding: 10px 12px !important;
        border-radius: 0 !important;
        line-height: 3.1rem;
    }

    .ai-ariane-element-show > span.ai-ariane-element-arrow-top-left,
    .ai-ariane-element-show > span.ai-ariane-element-arrow-bottom-left ,
    .ai-ariane-element-arrow-top-right,
    .ai-ariane-element-arrow-bottom-right {
        display: none;
    }

    /***************************************************************/
    /*********************      CATALOGUE       ********************/
    /***************************************************************/

    #ai-search-catalogues {
        height: calc(100% - -26px);
        margin-top: -24px;
        padding: 0;
    }
    
    .ai-search-catalogue, 
    .ai-catalogue-elements {
        padding: 10px 0;
    }

    .ai-catalogue-element {
        padding: 12.5px 15px;
        /* padding: 10px 50px 10px 10px; */
        line-height: 1.3rem;
    }

    .ai-catalogue-element .ai-icon {
        right: 10px;
        display: none;
    }

    .ai-catalogue-element .ai-catalogue-element-tag,
    .ai-catalogue-element .ai-tag-element {
        padding: 1px 5px;
        margin-left: 2px;
    }

    /***************************************************************/
    /*********************          TAGS        ********************/
    /***************************************************************/

    .ai-tags-element > ul > li {
        padding: 5px 0;
    }

    /***************************************************************/
    /*********************          LEGENDE     ********************/
    /***************************************************************/

    #ai-legend-button {
        right: 5px;
        padding: 8px 10px;
    }

    #ai-legend-button i {
        margin-right: 0;
        font-size: 1.3em;
    }
    
    #ai-legend-button > span {
        display: none;
    }

    #ai-legende {
        width: 98%;
        margin: 1%;
        left: auto;
    }

}