.test {
        color: red;
    }   
    
    #map {
      height: 1000px;
    } 
    
    #map_counter_wrapper {
        width: 300px;
        padding: 20px;
        position: absolute;
        right: 316px;
        top: 20px;
        z-index: 100;
        border-radius: 10px;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.80);
        /* shadow */
        box-shadow: 8px 8px 16px 8px rgba(71, 2, 38, 0.10);
       
    }
     
    #map_projects_list {
        width: 600px;
        right: 16px;
        top: 170px;
        position: absolute;
        z-index: 101;
        border-radius: 10px;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.80);
        /* shadow */
        box-shadow: 8px 8px 16px 8px rgba(71, 2, 38, 0.10);
        padding: 36px;
        padding-top:36px;
        max-height: 810px;
        /*overflow-y: scroll;*/
        font-family: Satoshi-Regular;
        overflow-y: scroll;
    }

    #map_projects_list h4 {
        color: var(--Earth, #808076);

        /* Heading/title */
        font-family: Satoshi-Regular;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 25.2px */
        letter-spacing: -0.18px;
        margin-bottom: 18px;
    }

    .project_list_country_name {
        color: var(--Shale, #3C3230);
        font-family: Satoshi-Bold;
        font-size: var(--Text-Sizes-Text-Regular, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
    }

    .project_list_project_name {
        color: var(--Oxide-Red, #470226);

        /* Heading/title */
        font-family: Satoshi-Bold;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 25.2px */
        letter-spacing: -0.18px;
        cursor: pointer;
    }

    .project_list_project_name:hover {
        color: #E04C34;
    }

    .project_list_projects_total {
        color: var(--Shale, #3C3230);
        font-family: Satoshi-Bold;
        font-size: var(--Text-Sizes-Text-Regular, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
    }

    .project_list_details {
        color: var(--Earth, #808076);
        font-family: Satoshi-Regular;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 21px */
        border-bottom: 1px solid #D9DAD9;
        padding-bottom: 8px;
    }

    .project_list_details_technology {
        font-size: 12px;
    }

    .list-flag-icon {
        height: 23px;
        padding-right: 8px;
    }

    #map_projects_detail {
        width: 600px;
        right: 16px;
        top: 170px;
        position: absolute;
        z-index: 101;
        border-radius: 10px;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.80);
        /* shadow */
        box-shadow: 8px 8px 16px 8px rgba(71, 2, 38, 0.10);
        padding: 36px;
        padding-top:56px;
        max-height: 810px;
        /*overflow-y: scroll;*/
        font-family: Satoshi-Regular;
        overflow-y: scroll;
    }


    .counter_category {
        color: #470226;
        font-family: Satoshi-Regular;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 24px */
    }
    
    .counter {
        color: #470226;
        font-family: Satoshi-Regular;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%; /* 52.8px */
        letter-spacing: -0.44px;
    }

    .map_counter_col {
        width: 110px;
    }

    .map_project_details_description {
        color: var(--Oxide-Red, #470226);

        /* Heading/Tagline */
        font-family: Satoshi-Regular;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 24px */               
    }

    .map_project_details_partners {
        color: var(--Oxide-Red, #470226);

        /* Heading/Tagline */
        font-family: Satoshi-Regular;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 24px */    
        margin-bottom: 32px;           
    }

    .map_project_details_subtitle {
        color: var(--Oxide-Red, #470226);
        font-family: Satoshi-Bold;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 25.2px */
        letter-spacing: -0.18px;
        margin-top: 32px;       
    }

    .map_project_details_subtitle2 {
        color: var(--Earth, #808076);
        font-family: Satoshi-Regular;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 21px */
        width: 260px;
        margin-bottom: 0;
        padding-right: 16px;
    }

    #map_projects_detail h1{
 
        color: #470226;
        font-family: Satoshi-Bold;
        font-size: var(--Text-Sizes-Heading-5, 28px) !important;
        font-style: normal;
        font-weight: 700;
        line-height: 140% !important; /* 39.2px */ 
        letter-spacing: -0.28px;
        padding-bottom: 16px;
        margin-bottom: 0;
    } 

    .map_project_details_detail_text {
        color: var(--Rock-Black, #1E0907);

        /* Heading/Tagline */
        font-family: Satoshi-Regular;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        width: 260px;
        padding-right: 16px;
    }

    .map_project_details_divider {
        height: 1px;
        width: 100%;
        background: #D9DAD9;
        margin-bottom: 26px;
    }

    .leaflet-popup-content-wrapper {
        padding: 36px !important;
        border-radius: 10px !important;
        border: 1px solid #FFF !important;
        background: rgba(255, 255, 255, 0.80) !important;
        /* glass */
        box-shadow: 8px 8px 16px 8px rgba(71, 2, 38, 0.10) !important;
        width: 600px !important;
        position: fixed !important;
        right: 0px !important;
        top: 0px !important;
    }    


    .flag-icon {
        max-width: 20px;
        width:20px;
        margin-top: -4px;
        margin-right: 5px;
        margin-left: 5px;
    }


    .flag-icon-detail {
        max-width: 56px;
        width:56px;
        height: 35px;
        margin-right: 8px;
        margin-left: 0;
        padding: 0;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        display: inline-block;
    }

    .map_project_details_country {
        color: var(--Shale, #3C3230);

        /* Text/Regular/Normal */
        font-family: "Instrument Sans";
        font-size: var(--Text-Sizes-Text-Regular, 16px);
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
    }
    
    .map_project_details_link a {
        color: var(--Orange, #E04C34);

        /* Text/Regular/Bold */
        font-family: "Instrument Sans";
        font-size: var(--Text-Sizes-Text-Regular, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
    }



    .map_project_details_link a img {
        margin-left: 8px;
    }

    .map_project_details_close {
        position: absolute;
        top: 24px;
        right: 24px;
        cursor: pointer;
        width: 38px;
        height: 38px;
        border-radius: 38px;
        background: var(--light-bg, #EEEEE6);
        backdrop-filter: blur(2px);
    }


    .checkbox_label {
        white-space: normal;
    }

    .map_reset a {
        color: var(--Orange, #E04C34);
        /* Heading/Tagline */
        font-family: Satoshi-Regular;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 24px */
    }

/* ############################ MOBILE ############################################### */
@media (max-width: 480px) {
    #map_counter_wrapper {                                                                                                                                                                                                          
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 360px;
    }

    #map_projects_detail {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 360px;
        top: 140px;
    }

    .map_project_details_subtitle2 {
        width: 150px;
        padding-right: 16px;
    }

    .map_project_details_detail_text {
        width: 150px;
        padding-right: 16px;
    }

    #map_projects_list {
        width: 360px;
        display: none;
    }


}



/* #########################  MINI ################################ */
@media (min-width: 481px) and (max-width: 768px) {
    .counter {
        font-size: 44px;    
    }

    .counter_category {
        font-size: 16px;
    }
}



/* ############################### PRO  ######################################## */
@media (min-width: 769px) and (max-width: 1279px) {
    .counter {
        font-size: 44px;    
    }

    .counter_category {
        font-size: 16px;
    }
}




/* ############################ RESPONSIVE ############################################### */



@media (min-width: 1280px) {
    
    #map_counter_wrapper {
        right: 316px;
    }
    .counter {
        font-size: 44px;    
    }

    .counter_category {
        font-size: 16px;
    }
}