/*----All projects page styling----*/

button:focus {
    outline: none;
}

.page-heading {
    height: 9vh;
    margin-top: 7.5vh;
    padding: 0 8%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: sticky;
    top: 7.5vh;
    z-index: 2000;
    background-color: white;
    transition: 0.02s ease-out;
}

.page-heading hr {
    width: 100%;
    border-top: 1px solid #333;
}

#filter-menu {
    position: sticky;
    /* top: 15.5vh; */
    z-index: 100;
}

#filter-select {
    height: auto;
    display: flex;
    padding: 0;
    background-color: white;
}

.filter h3 {
    font-size: 0.9em;
}

.dropbtn {
    width: 100%;
    padding: 1em 0 1em 8vw;
    text-align: left;
    height: auto;
    background-color: transparent;
    border: none;
    font-weight: 800;
    font-size: 12px;
    transition: 0.2s ease-out;
    color: #000;
}

.dropbtn a {
    color: #000;
}

.dropbtn:hover, .dropbtn a:hover {
    color: #868686;
}

#all {
    margin-top: -18px;
}

.filter-open {
    background-color: white;
}

.dropmenu {
    box-sizing: border-box;
    position: fixed;
    background-color: white;
    width: 100%;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    /* transition: 0.4s ease-out; */
}

.expand-menu {
    max-height: 100%;
    padding: 0;
    transition: 0.3s ease-in;
}

.dropmenu a {
    color: #333;
    display: block;
    padding: 1em 8vw;
    /* border-bottom: 1px solid #eecc11; */
    text-decoration: none;
}

.dropmenu a:active {
    background-color: red;
}

.dropmenu a:hover {
    color: #ffdd11;
    background-color: #333;
}

.projects-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    z-index: -5000;
}

.project-item {
    height: 50vw;
    position: relative;
    display: none;
}

.project-overlay {
    background-color: rgba(255, 255, 255, 0.9);
    height: inherit;
    width: 40%;
    position: absolute;
    z-index: 1;
    opacity: 1;
    padding-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

.right-overlay {
    right: 0;
}

.project-name {
    font-weight: 700;
}

.project-overlay h3 {
    font-weight: 900;
    font-size: 12px;
}

.project-overlay hr {
    width: 100%;
    border-top: 0.5px solid #666;
}

.project-overlay h4 {
    font-size: 12px;
}

.project-item a span {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
}

.show {
    display: block;
}

/* --- All projects page for desktop --- */

@media (min-width:1200px) {

    .page-heading {
        height: 12vh;
        margin-top: 7.5vh;
        padding: 0 7% 1em;
        position: sticky;
        top: 7.5vh;
        background-color: white;
    }

    .page-heading hr {
        display: none;
    }

    #filter-menu {
        position: fixed;
        top: 8vh;
        left: 6.5%;
    }

    #filter-select {
        height: 10vh;
        width: auto;
        display: flex;
        padding: 0;
        position: sticky;
        top: 7.5vh;
        z-index: 3;

    }

    .dropbtn {
        width: 8vw;
        padding: 0 1em;
        text-align: left;
        height: auto;
        border: none;
        font-weight: 800;
        font-size: 13px;
    }

    .dropmenu {
        box-sizing: border-box;
        position: relative;
        background-color: white;
        width: 8vw;
        padding: 0;
    }

    #service-menu {
        left: 8vw;
    }

    .dropmenu a {
        padding: 0.3em 1em;
    }


    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .project-item {
        height: 45vh;
        width: 100%;
    }

    .projects-grid div:hover .project-overlay {
        display: flex;
    }

    .project-overlay {
        display: none;
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 5%;
    }

    .project-name  {
        font-size: 2.5em;
        font-weight: 400;
    }

    .project-overlay h3 {
        font-size: 1.2em;
        text-align: center;
    }

    .project-overlay hr {
        margin: 0.5em 0;
        width: 100%;
        border-top: 1px solid #333;
    }

    .project-overlay h4 {
        font-size: 1em;
        text-align: center;
    }
}

/* --- project link images --- */

#_1 {
    background-image: url(../img/projects/aqua_vista_by_fairway_at_galle/thumbnail_all_projects.jpg);
}

#_2 {
    background-image: url(../img/projects/proposed_cubic_house_project/thumbnail_all_projects.jpg);
}

#_3 {
    background-image: url(../img/projects/bricksgate_wattala/thumbnail_all_projects.jpg);
}

#_4 {
    background-image: url(../img/projects/sandya_boutique_hotel/thumbnail_all_projects.jpg);
}

#_5 {
    background-image: url(../img/projects/fairway_kurunegala/thumbnail_all_projects.jpg);
}

#_6 {
    background-image: url(../img/projects/the_fairway_apartments_olcott_mw/thumbnail_all_projects.jpg);
}

#_7 {
    background-image: url(../img/projects/leon_house/thumbnail_all_projects.jpg);
}

#_8 {
    background-image: url(../img/projects/negombo_house_2/thumbnail_all_projects.jpg);
}

#_9 {
    background-image: url(../img/projects/office_interior_at_otto_bock/thumbnail_all_projects.jpg);
}

#_10 {
    background-image: url(../img/projects/park_residence_nugegoda/thumbnail_all_projects.jpg);
}

#_11 {
    background-image: url(../img/projects/saudi_ambassador_residence/thumbnail_all_projects.jpg);
}

#_12 {
    background-image: url(../img/projects/the_proposed_beira_office_project/thumbnail_all_projects.jpg);
}

#_13 {
    background-image: url(../img/projects/proposed_low_cost_house_project/thumbnail_all_projects.jpg);
}

#_14 {
    background-image: url(../img/projects/fort_hotel/thumbnail_all_projects.jpg);
}

#_15 {
    background-image: url(../img/projects/icc_apartment_oceanfront_condominiums/thumbnail_all_projects.jpg);
}

#_16 {
    background-image: url(../img/projects/nilaveli_hotel/thumbnail_all_projects.jpg);
}

#_17 {
    background-image: url(../img/projects/nitf_office/thumbnail_all_projects.jpg);
}

#_18 {
    background-image: url(../img/projects/the_fairway_apartments_koswatte/thumbnail_all_projects.jpg);
}

#_19 {
    background-image: url(../img/projects/the_proposed_amusement_park/thumbnail_all_projects.jpg);
}

#_20 {
    background-image: url(../img/projects/proposed_4_unit_house_project/thumbnail_all_projects.jpg);
}

#_21 {
    background-image: url(../img/projects/bar_at_grandeeza_hotel_negombo/thumbnail_all_projects.jpg);
}

#_22 {
    background-image: url(../img/projects/student_apartment/thumbnail_all_projects.jpg);
}

#_23 {
    background-image: url(../img/projects/califonia_grill_at_galadari_hotel/thumbnail_all_projects.jpg);
}

#_24 {
    background-image: url(../img/projects/coorg_hotel_at_india/thumbnail_all_projects.jpg);
}

#_25 {
    background-image: url(../img/projects/fairway_kirulapana/thumbnail_all_projects.jpg);
}

#_26 {
    background-image: url(../img/projects/studiohaute/thumbnail_all_projects.jpg);
}

#_27 {
    background-image: url(../img/projects/farmhouse/thumbnail_all_projects.jpg);
}

#_28 {
    background-image: url(../img/projects/447_apartment_at_union_place/thumbnail_all_projects.jpg);
}

#_29 {
    background-image: url(../img/projects/avani_hotel_bentota/thumbnail_all_projects.jpg);
}

#_30 {
    background-image: url(../img/projects/kandy_city_hotel/thumbnail_all_projects.jpg);
}

#_31 {
    background-image: url(../img/projects/private_residence_at_india/thumbnail_all_projects.jpg);
}

#_32 {
    background-image: url(../img/projects/mack_air_ticketing_office/thumbnail_all_projects.jpg);
}

#_33 {
    background-image: url(../img/projects/rancrisp_cashew_store_shangri-la/thumbnail_all_projects.jpg);
}

#_34 {
    background-image: url(../img/projects/ranscrip_crescat/thumbnail_all_projects.jpg);
}

#_35 {
    background-image: url(../img/projects/ruhuna_hospital/thumbnail_all_projects.jpg);
}

#_36 {
    background-image: url(../img/projects/skoda_showroom/thumbnail_all_projects.jpg);
}

#_37 {
    background-image: url(../img/projects/nano_homes/thumbnail_all_projects.jpg);
}

#_38 {
    background-image: url(../img/projects/akbar_tea_nawam_mawatha/thumbnail_all_projects.jpg);
}

#_39 {
    background-image: url(../img/projects/akbar_tea_shop_at_pearl_of_asia/thumbnail_all_projects.jpg);
}

#_40 {
    background-image: url(../img/projects/tourism_information_center/thumbnail_all_projects.jpg);
}

#_41 {
    background-image: url(../img/projects/gymkhana_club/thumbnail_all_projects.jpg);
}