#project1{
  background-image: url(../images/thewall/logo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #87A7B0;
}
#project1 img:first-child{
  height: 100%;
  width: 100%;
  filter: grayscale(30%);
}
#project2{
  background-image: url(../images/iproject/mapapp.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #87A7B0;

}
#project3{
  background-image: url(../images/faseovergang/faseovergang.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #87A7B0;

}
#project1,#project2,#project3{

 margin-top: 2em;

}
#project4{
  background-image: url(../images/daley/daley.png);
  background-color: #87A7B0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#project5{
    background-image: url(../images/ruiterroute.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #ffffff;


}
#project6{
    background-image: url(../images/dormatec.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #ffffff;


}
#project4,#project5,#project6,#project7{
  margin-top: 2em;
  margin-bottom: 2em;

}
#project7{
  background-image: url(../images/socialnetwork.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #ffffff;


}
#project8{
    background-image: url(../images/manolis/home.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #ffffff;


}
.projects{

  width: 100%;
  height:450px;
  border-radius: 25px;
  border: 5px solid grey;

}
.projects p{
  border-radius: 25px;

}
.projects img{
  width: 100%;
  height: 100%;
  filter: grayscale(30%);
}
.container.gallery{
  padding: -1em !important;
  /*background-color: black;*/
  margin-left :8%;
  margin-right:8%;
  width: 84%;
}
#gallery{
  text-align: center;
}
#gallery h1{
  color: #B0AC7D;
}
#gallery h3{
  color: #B0AC7D;
  background-color: rgba(0,0,0,0.95);
}
.photo{
  position: relative;
  
}
.photo:hover .projectoverlay{
 opacity: 0.9;
}
.projectoverlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  border: grey solid 5px;
  background-color: white;
}
.overlay-border{
  
}


.row{
  margin-top: 0em;
  text-align: center;
}

.col-sm{
  text-align: center;
}
.col-xl{
  text-align: center;
}
.projectrow{
    margin-top: 0em;
    margin-left: 5%;
    text-align: center;
  }

.projectcolumns{
    -ms-flex: 50%;
    flex: 50%;
    max-width: 47% !important;
}
@media screen and (max-width: 800px)
.projectcolumns{
    -ms-flex: 50%;
    flex: 50%;
    max-width: 47% !important;
}
@media screen and (max-width: 800px)
.projectcolumns{
    -ms-flex: 50%;
    flex: 50%;
    max-width: 47% !important;
}