#featured_gallery{
   display: grid;
   grid-template-columns: 33% 33% 33%;
   grid-gap:2px;
   padding-left:5%;
   padding-right:5%;
}


.gallery-entry {
   padding:2%;
   margin-bottom:9%;
   width:100%;
   text-align: center;
}

.gallery-entry .project-title {
   padding: 3%;
}

.project-title{
   font-weight: 700;
   font-size: 2vh;
   padding:0px !important;
   padding-top: 5px !important;
}

.project-city-title {
   font-size: 1.7vh;
}

.project-title, .project-city-title {
   color:#21409a;
   text-align:left;
   margin:auto;
}


.img-container {
   position:relative;
   margin:auto;
   height:395px;
   width:579px;
}

.img-container img{
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:top;
   
}


.gallery-entry .overlay{
   /* align the view project button to middle of image*/
   display:flex;
   justify-content: center;
   align-items: center;


   position:absolute;
   bottom:0;
   width:100%;
   height:100%;
   background: rgba(33,64,154,0.61);
   transition: .3s ease;
   opacity:0;
}

.gallery-entry button {
   background-color:#1283c6;
   color: white;
   padding:8px;
   font-weight: 800;
   font-size: 13px;
   border:none;
   cursor: pointer;
}

.img-container:hover .overlay{
   opacity:1;
}

#featured_map{
   width:100%;
}

#featured_map img {
   width:100%;
}

#project_map{
   object-fit:cover;
}

.markerTitle{
   font-size:1.7vw;
   font-weight:800;
}

.titleContainer{
   text-align:center;
   width:400px;
}

.markerMoreInfo{
   font-size:25px;
   font-weight:500;
}

#featured_search{
   margin-top:-7px;
   background-color: #1283c6;
   height:290px;
   position:relative;
}

#featured_search form {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   /*width:75%;*/
   text-align:left;

   display:flex;
   justify-content: space-evenly;
}

/* Custom drop down menu code from https://www.w3schools.com/howto/howto_custom_select.asp */
/* The container must be positioned relative: */
.custom-select {
   position: relative;
   font-family: Arial;
   width:280px;
   height: 45px;
   margin:25px;
   margin-top:10px;
   margin-bottom:10px;
   vertical-align: text-bottom;
 }

 .custom-select:nth-child(1){
   /*width:375px;*/
 }
 
 .custom-select select {
   display: none; /*hide original SELECT element: */
 }
 
 .select-selected {
   position:absolute;
   background-color: #1283c6;
   border-bottom:solid  .5px;
   width:100%;
   bottom:0;
   padding-bottom:5px;
 }

 /*
 #featured_search_form .custom-select:nth-child(1) .select-selected{
   font-size:35px;
   font-weight:800;
   padding-bottom:15px;
   color:white;
 }*/

 #featured_search_form .custom-select {
    font-size:22px;
 }

 #featured_search_form .custom-select .select-selected{
   color: #bad2ed;
 }

 #featured_search input {
    background-color: #21409a;
    border:none;
    color:white;
    font-weight:bold;
    padding-left:25px;
    padding-right:25px;
    height:40px;
    margin-top:16px;
 }
 
 /* Style the arrow inside the select element: */
 .select-selected:after {
   position: absolute;
   content: none;
   right:0;

 }
 
 /* Point the arrow upwards when the select box is open (active): */
 .select-selected.select-arrow-active:after {
   border-color: transparent transparent #fff transparent;
   top: 7px;
 }
 
 /* style the items (options), including the selected item: */
 .select-items div,.select-selected {
   color: #ffffff;
   cursor: pointer;
 }

 .select-items div{
    color:#1283c6;
    padding:11px;
    font-size:20px;
    border:solid #21409a .5px;
    border-bottom:solid white 0px;
 }
 
 /* Style items (options): */
 .select-items {
   position: absolute;
   background-color: rgb(255, 255, 255);
   left: 0;
   right: 0;
   bottom:-60px;
   border: solid #21409a .5px;
   overflow:scroll;
   z-index:999;
   text-align:center;
   overflow:hidden;
 }

 
 /* Hide the items when the select box is closed: */
 .select-hide {
   display: none;
 }
 
 .select-items div:hover, .same-as-selected {
   background-color: rgba(0, 0, 0, 0.1);
 }

 /* Google Maps */
#map {
   height:900px;
   margin-top:50px;
 }

#get_projects{
   cursor:pointer;
}

.infoImg img{
   width:400px;
   height:200px;
   object-fit: cover;
}

.infoWindow{
   display:flex;
   justify-content: center;
   align-items:center;
   flex-direction:column;
}

.no-results {
   margin-bottom:30px;
   text-align:center;
   width:100%;
}


@media screen and (min-width:2010px) {
   .project-title, .project-city-title {
      width:579px;
   }
}

@media screen and (max-width:2010px) {
   .img-container{
      width:480px;
      height:321px;
   }
   .project-title, .project-city-title {
      width:480px;
   }
}

@media screen and (max-width:1660px) {
   .img-container{
      width:411px;
      height:259px;
   }
   .project-title, .project-city-title {
      width:411px;
   }
}

@media screen and (max-width:1460px) {
   
   #featured_search_form .custom-select:nth-child(1) .select-selected{
      /*
      font-size:25px;
      font-weight:700;
      padding-bottom:5px; */
    }
    .custom-select{
      width: 250px;
    }
    
    /*
    .custom-select:nth-child(1){
      width: 280px;
    }
    */

    #featured_gallery {
      padding-left:5%;
      padding-right:5%;
   }

   .img-container{
      width:321px;
      height:221px;
   }

   .project-title, .project-city-title {
      width:321px;
   }

}


@media screen and (max-width:1210px){
   /*
   #featured_search_form .custom-select:nth-child(1) .select-selected{
      font-size:20px;
    }

    .custom-select:nth-child(1){
      width: 230px;
    }
    */
}


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

   #map {
      height:600px;
   }

   #featured_gallery {
      grid-template-columns: auto;
      padding-left:5%;
      padding-right:5%;
   }

   #featured_search_form .custom-select:nth-child(1) .select-selected{
      /*
      width:100%;
      font-size:22px;*/
    }
    .custom-select:nth-child(1){
      width: 100%;
    }

   .gallery-entry {
      margin-bottom:5%;
   }

   #featured_search form {
      flex-direction:column;
      width:100%;
      padding-left:30px;
      padding-right:30px;
      text-align:center;
   }

   #featured_search {
      padding:20px;
   }

   #featured_search input {
      height:50px;
   }

   .custom-select {
      width:100%;
      margin:0;
      margin-bottom:15px;
   }

   .select-selected {
      width:100%;
   }

   #get_projects{
      margin-top:30px;
   }


   #featured_search{
      height:320px;
   }

   .img-container{
      height:350px;
      width:580px;
   }

   .project-title, .project-city-title {
      width:580px;
   }

}

@media screen and (max-width:710px){
   .img-container{
      height:240px;
      width:400px;
   }

   .project-title, .project-city-title {
      width:400px;
   }
}

@media screen and (max-width:480px){
   .img-container{
      height:200px;
      width:300px;
   }

   .project-title, .project-city-title {
      width:300px;
   }
}
@media screen and (max-width:360px){
   .img-container{
      height:200px;
      width:100%;
   }
   .project-title, .project-city-title {
      width:100%;
   }
}