/* Portfolio */
#portfolio {
  padding-bottom: 50px;
}

#portfolio.full-screen {
  padding: 0;
}

#portfolio.full-screen-spacer {
  padding: 15px 0;
}

#portfolio .project {
  padding-top: 15px;
  padding-bottom: 15px;
}

#portfolio.no-gutter .project {
  margin: 0;
  padding: 0;
}

#portfolio.w-shadow .project .img-bg-color {
  -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}

#portfolio.w-shadow .project:hover .img-bg-color {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#portfolio ul.portfolio {
  margin-bottom: 0 !important;
}

.portfolio-filter {
  margin-top: 40px;
  margin-bottom: 10px;
}

.portfolio-filter.list-inline li {
  padding: 0;
}

.portfolio-filter a {
  color: #666666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 40px;
  border: 2px solid transparent;
  margin: 0 5px;
  padding: 10px 8px;
}

.portfolio-filter a.active {
  color: #c39d6d;
  background-color: transparent;
  border: 2px solid transparent;
}

.portfolio-filter a:hover {
  color: #c39d6d;
  background-color: transparent;
  border: 2px solid transparent;
}

/* Hover Effect */
.project-hover-tools {
  position: absolute;
  z-index: 2;
  bottom: 46%;
  right: 36%;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, ease-in-out 0.3s;
  -moz-transition: opacity 0.3s, ease-in-out 0.3s;
  -o-transition: opacity 0.3s, ease-in-out 0.3s;
  transition: opacity 0.3s, ease-in-out 0.3s;
}

.project:hover .project-hover-tools {
  bottom: 43%;
  right: 36%;
  text-align: center;
  visibility: visible;
  opacity: 1;
}

.m-project .project-hover-tools {
  bottom: 49%;
}

.project.m-project:hover .project-hover-tools {
  bottom: 46%;
}

.project .img-bg-color.primary {
  background: #3F3F3F;
  margin-top:30px;
}

.project .img-bg-color.default {
  background: #333333;
}

.project img {
  -webkit-transition: ease-in-out 0.3s;
  -moz-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}

.project:hover img {
  opacity: 0.25;
}

.view-btn {
  display: inline-block;
  color: #333333;
  background-color: white;
  width: 42px;
  height: 42px;
  text-align: center;
  line-height: 45px;
  text-decoration: none;
  vertical-align: middle;
  border-radius: 50%;
  margin: 3px;
}

.view-btn:hover {
  color: white;
  background-color: #333333;
}

.project .img-bg-color.default .open-gallery {
  color: white;
  background-color: #c39d6d;
}

.project .img-bg-color.default .open-gallery:hover {
  color: white;
  background-color: #ad8b60;
}

.project-details {
  position: absolute;
  z-index: 2;
  bottom: 5%;
  left: 10%;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, ease-in-out 0.3s;
  -moz-transition: opacity 0.3s, ease-in-out 0.3s;
  -o-transition: opacity 0.3s, ease-in-out 0.3s;
  transition: opacity 0.3s, ease-in-out 0.3s;
}

.project:hover .project-details {
  bottom: 8%;
  left: 10%;
  text-align: left;
  visibility: visible;
  opacity: 1;
}

.m-project .project-details {
  bottom: 2%;
}

.project.m-project:hover .project-details {
  bottom: 5%;
}

.project-subcategories {
  position: absolute;
  z-index: 2;
  top: 90px;
  left: 50px;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, ease-in-out 0.3s;
  -moz-transition: opacity 0.3s, ease-in-out 0.3s;
  -o-transition: opacity 0.3s, ease-in-out 0.3s;
  transition: opacity 0.3s, ease-in-out 0.3s;
  overflow-wrap: break-word;
  width: 75%;
}

.project:hover .project-subcategories {
  top: 130px;
  left: 50px;
  text-align: left;
  visibility: visible;
  opacity: 1;
  overflow-wrap: break-word;
  width: 300px;
}

.project-subcategories a:hover{
  border-bottom: 2px dashed #ece5ee;
}

.m-project .project-subcategories {
  bottom: 2%;
}

.project.m-project:hover .project-subcategories {
  bottom: 5%;
}


.project .to-fade {
  position: absolute;
  top: 53px;
  left: 40px;
  z-index: 10;

  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.project:hover .to-fade {
  visibility: hidden;
}

.project .to-unfade {
  position: absolute;
  visibility: hidden;
  top: 53px;
  left: 40px;
  z-index: 10;

  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.project:hover .to-unfade {
  visibility: visible;
}

.project img {
  outline: 2px solid #cf1e27;
  outline-offset: -5px;
  width: 100%;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-backface-visibility: hidden;


}

.project-title {
  color: white;
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}

.project .skill {
  color: #f8f8f8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.project .skill .a{
  color: #f8f8f8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* End Hover Effect */
/* End Portfolio */

@media only screen and (max-width: 600px) {
  .col-xs-6 {
    width: 100%;
  }

  .project-hover-tools {
    bottom: 48%;
    right: 41%;
  }

  .project:hover .project-hover-tools {
    bottom: 45%;
    right: 41%;
  }

  .m-project .project-hover-tools {
    bottom: 50%;
  }

  .project.m-project:hover .project-hover-tools {
    bottom: 47%;
  }

}
@media only screen and (max-width: 550px) {


  .project-hover-tools {
    bottom: 48%;
    right: 40%;
  }

  .project:hover .project-hover-tools {
    bottom: 45%;
    right: 40%;
  }

}
@media only screen and (max-width: 480px) {

  .project-hover-tools {
    bottom: 47%;
    right: 38%;
  }

  .project:hover .project-hover-tools {
    bottom: 44%;
    right: 38%;
  }

  .m-project .project-hover-tools {
    bottom: 49%;
  }

  .project.m-project:hover .project-hover-tools {
    bottom: 46%;
  }

}
@media only screen and (max-width: 400px) {
  .m-project .project-hover-tools {
    bottom: 48%;
  }

  .project.m-project:hover .project-hover-tools {
    bottom: 45%;
  }

}
@media only screen and (max-width: 360px) {
  .project-hover-tools {
    bottom: 44%;
    right: 32%;
  }

  .project:hover .project-hover-tools {
    bottom: 41%;
    right: 32%;
  }

  .m-project .project-hover-tools {
    bottom: 47%;
  }

  .project.m-project:hover .project-hover-tools {
    bottom: 44%;
  }

}
/* Min Widths */
@media only screen and (min-width: 1200px) {

  #portfolio.two-col .project .project-hover-tools {
    right: 41% !important;
    bottom: 48%;
  }

  #portfolio.two-col .project:hover .project-hover-tools {
    right: 41% !important;
    bottom: 45%;
  }

  #portfolio.two-col .project.m-project .project-hover-tools {
    bottom: 50%;
  }

  #portfolio.two-col .project.m-project:hover .project-hover-tools {
    bottom: 47%;
  }

  #portfolio.four-col .project .project-hover-tools {
    right: 31% !important;
    bottom: 43%;
  }

  #portfolio.four-col .project:hover .project-hover-tools {
    right: 31% !important;
    bottom: 40%;
  }

  #portfolio.four-col .project.m-project .project-hover-tools {
    bottom: 47% !important;
  }

  #portfolio.four-col .project.m-project:hover .project-hover-tools {
    bottom: 44% !important;
  }
}
@media only screen and (min-width: 992px) {
  #portfolio.two-col .project .project-hover-tools {
    right: 39%;
  }

  #portfolio.two-col .project:hover .project-hover-tools {
    right: 39%;
  }

  #portfolio.four-col .project .project-hover-tools {
    right: 28%;
    bottom: 43%;
  }

  #portfolio.four-col .project:hover .project-hover-tools {
    right: 28%;
    bottom: 40%;
  }

  #portfolio.four-col .project.m-project .project-hover-tools {
    bottom: 46%;
  }

  #portfolio.four-col .project.m-project:hover .project-hover-tools {
    bottom: 43%;
  }

}
/* End Min Widths */
/* / End Media Screens */