/* @override 
	https://hameedlaw.ca/css/2016/projects_style.css
	https://hameedlaw.ca//css/2016/projects_style.css */


/**
 * Project 3 stylesheet
 * */
.projects-3 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.projects-3 h1,
.projects-3 h3 {
  /*margin: 0 0 40px;*/
  /*font-size: 30px;*/
  /*font-weight: 300;
*/
  text-align: center;
/*  letter-spacing: .1em;*/
}
.projects-3 .projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
.projects-3 .projects + .projects {
  margin-top: 85px;
}
.projects-3 .projects .project-wrapper {
  
}
.projects-3 .projects .project-wrapper:first-child + .project-wrapper {
  /*text-align: center;*/
}
.projects-3 .projects .project-wrapper:first-child + .project-wrapper + .project-wrapper {
  text-align: right;
}
.projects-3 .projects .project {
  width: auto;
  max-width: 300px;
  display: inline-table;
  vertical-align: top;
}
.projects-3 .projects .photo-wrapper {
  width: auto;
  max-width: 300px;
  height: 366px;
  margin-bottom: 10px;
  position: relative;
  /*-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;*/
  overflow: hidden;
  background-color: #ffffff;
  -webkit-transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
  transition: background-color 0.4s;
}
.service-photo-wrapper {
  width: auto;
  max-width: 300px;
  height: 230px;
  margin-bottom: 10px;
  position: relative;
  /*-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;*/
  overflow: hidden;
  background-color: #ffffff;
  -webkit-transition: background-color 0.4s;
  -moz-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
  transition: background-color 0.4s;
}
.projects-3 .projects .photo {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  /*-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;*/
  overflow: hidden;
  background: 50% 50% no-repeat;
  opacity: 100;
  filter: alpha(opacity=10000);
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.projects-3 .projects .overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  color: #fff;
  line-height: 366px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.projects-3 .projects .overlay [class*="fui-"] {
  font-size: 66px;
  color: #a21d21; /* hameedlaw red */
  text-shadow: 0 2px 1px #000000;
}
.projects-3 .projects .info {
  text-align: left;
  font-size: 18px;
  line-height: 26px;
  color: #000000;
  /*margin-top: 33px;*/
}
.projects-3 .projects .info b {
  color: #7f8c8d;
}
.projects-3 .projects .name {
  color: #a21d21; /* hameedlaw red */
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;

  -webkit-transition: color 0.4s;
  -moz-transition: color 0.4s;
  -o-transition: color 0.4s;
  transition: color 0.4s;
}
.projects-3 .projects .project:hover .photo-wrapper {
  /*background-color: #a21d21;*/ /* hameedlaw red */
  /*border-top: 1px solid #a21d21;*/ /* hameedlaw red */
  /*border-left: 1px solid #a21d21;*/ /* hameedlaw red */
  /*border-right: 1px solid #a21d21;*/ /* hameedlaw red */

}
.projects-3 .projects .project:hover .photo {
  opacity: 40;
  filter: alpha(opacity=4000);
  opacity: 0.4;
  filter: alpha(opacity=40);
  color: #a21d21; /* hameedlaw red */;
}
.projects-3 .projects .project:hover .overlay {
  opacity: 100;
  filter: alpha(opacity=10000);
  opacity: 1;
  filter: alpha(opacity=100);
}
.projects-3 .projects .project:hover .name {
  color: #a21d21; /* hameedlaw red */
  text-decoration: underline;
}
@media (max-width: 767px) {
  .projects-3 .projects {
    display: block;
    width: auto;
  }
  .projects-3 .projects .project-wrapper {
    display: block;
    text-align: center!important;
  }
  .projects-3 .projects .project-wrapper + .project-wrapper {
    margin-top: 85px;
  }
}