.portfolio-main-container{

}

.portfolio-banner{
  position:relative;
  height:100vh;
  width:100%;
}

.portfolio-banner-content{
  position:relative;
  height:100%;
  width:100%;
  overflow: hidden;
}

.portfolio-banner-content
.portfolio-banner-img {
  position: absolute;
  background:url(../images/img/portfolio-bg.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  height:100%;
  width:100%;
  z-index: 1;
}

.portfolio-banner-content
.portfolio-main-content {
  position: absolute;
  display: flex;
  height:100%;
  width:100%;
  z-index: 2;
}

.portfolio-main-content
.portfolio-content {
  margin: auto auto;
  text-align: center;
}

.portfolio-main-content
.portfolio-content h1 {
  font-size:80px;
  font-weight:600;
  text-transform: uppercase;
  color:#fff;
  text-shadow: 0px 2px 2px rgba(0,0,0, 0.54);
}

.portfolio-main-content
.portfolio-content h4 {
  font-size:24px;
  font-weight:500;
  color:#fff;
  text-shadow: 0px 2px 2px rgba(0,0,0, 0.54);
}

.portfolio-list-container {
  padding:50px 0;
  background: #f5f5f5;
  width:100%;
}

.portfolio-list-container
.p-thumbs-wpr {
  width:100%;
  min-height:450px;
  height:450px;
  border:1px solid #e0e0e0;
  position: relative;
  background:#f9f9f9;
  margin-bottom:30px;
}

.p-thumbs-wpr
a.p-img-link {
  font-size:20px;
  font-weight:600;
  color:rgba(0,0,0,0.70);
  text-transform:uppercase;
}

.p-thumbs-wpr
.p-thumbs-img-wpr {
  width:100%;
  padding:70% 0 0 0;
  position: relative;
  background:#e0e0e0;
  overflow: hidden;
}

.p-thumbs-wpr
.p-thumbs-img-wpr img{
  position: absolute;
  top:50%;
  left:50%;
  width:100%;
  height:auto;
  transform: translate(-50%, -50%);
}

.p-thumbs-wpr
.p-thumbs-img-wpr div {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.p-thumbs-wpr
.p-thumb-details-wpr {
  padding:30px 30px 30px 30px;
}

.p-thumbs-wpr
.p-thumb-details-wpr h4 {
  font-weight:600;
  font-size:24px;
  text-transform: uppercase;
  color:rgba(0,0,0,0.70);
}

.p-thumbs-wpr
.p-thumb-btn {
  padding:0 30px;
  position: absolute;
  bottom:30px;
  left:0;
  width:100%;
  opacity: 0.12;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.p-thumbs-wpr:hover
.p-thumb-btn {
  opacity: 1;
}

.p-thumbs-wpr
.p-thumb-btn a.button{
  margin-bottom:0;
  font-weight:600;
  font-size:14px;
}