/* ============================================================================
    PROJECTS
============================================================================ */
#portfolio-wrapper {width:100%;}
.portfolio-content {width:1200px;margin:0 auto;}

.project-banner-paragraph  {
  padding:40px 0 20px 0;
}
.project-banner-paragraph h1 {
  color: #333;
  font-size: 32px;
  line-height: 1.3;
  font-weight:400;
}

#project-wrapper {width:100%;padding:30px 0 60px 0;}
.project-container {width:1175px;margin:0px auto;}
.project-left {width:420px;float:left;}
.project-right {width:670px;float:right;}

.project-header h2 {font-family: 'Montserrat', sans-serif;font-size: 16px;font-weight: 600;}
.project-description {padding:30px 0 10px 0;}
.project-det-header {font-family: 'Montserrat', sans-serif;font-size: 16px;font-weight: 400;padding:40px 0 0 0;}
.project-det-desc {padding:5px 0 0 0;}

.project-photo-row {min-height:450px;margin:0 0 20px 0;position:relative;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
}

.prj-photo-title {position:absolute;z-index:90;top:10px;left:10px;padding:5px 10px 5px 10px;background:#ff0000;font-size:14px;line-height:16px;color:#fff;}

.project-entry-button {padding:50px 0 0 0;}
.project-entry-button-mobile {display:none;}

/*photos */
.iprt-def {width: 33.2%;height:630px;display: inline-block;vertical-align: middle;margin:0 0.2% 0.2% 0;position:relative;}
.iprt-last {width: 33.2%;height:630px;display: inline-block;vertical-align: middle;margin:0 0 0.2% 0;position:relative;}
.iprtcontainer img {width:100%;height:100%;overflow: hidden;}
.iprtcontainer-last img {width:100%;height:100%;overflow: hidden;}  

a.igallphoto-hover {width:100%;height:100%;position: absolute;top:0;left:0;display:block;background: none;}
a.igallphoto-hover:hover {width:100%;height:100%;position: absolute;top:0;left:0;display:block;background: rgba(78, 174, 211, 0.6); 
transition: background-color 0.5s linear;-moz-transition: background-color 0.5s linear;-webkit-transition: background-color 0.5s linear;-ms-transition: background-color 0.5s linear;}  

.visitproject {display:none;}

.igallphoto-hover:hover .visitproject {
  display:block;position:relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;  
  width: 60%;
  height: 60%;
  margin: 20% 17% 20% 17%;
  padding: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #effafe;
}

.project-image-title {
  font-family: 'Poppins', sans-serif;
  font-size: 23px;
  font-weight: 500;
  text-align: center;
  color:#000;
}

.project-image-category {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:#000;
}

/* ============================================================================
    RESPONSIVE 
============================================================================ */
@media only screen and (min-width: 1380px) and (max-width: 1880px){
/*photos */
.iprt-def {width: 33.2%;max-width:100%;height: auto;object-fit: cover;}
.iprt-last {width: 33.2%;max-width:100%;height: auto;object-fit: cover;}
}

@media only screen and (min-width: 1180px) and (max-width: 1380px){
.portfolio-content {width:1120px;margin:0 auto;}
.project-container {width:1120px;margin:0px auto;}
.project-left {width:420px;float:left;}
.project-right {width:670px;float:right;}

/*photos */
.iprt-def {width: 33.2%;max-width:100%;height: auto;object-fit: cover;}
.iprt-last {width: 33.2%;max-width:100%;height: auto;object-fit: cover;}

.igallphoto-hover:hover .visitproject {width: 60%;height: 50%;margin: 15%;padding: 24px;}
.project-image-title {font-size: 16px;}
}

@media only screen and (min-width: 959px) and (max-width: 1180px){
.project-container {width:100%;margin:0px auto;}
.portfolio-content {width:95%;margin:0 auto;} 

.project-banner-paragraph h1 {font-size: 22px;}

.project-left {width:95%;float:none;margin:0 auto;}
.project-right {width:100%;float:none;margin:0 auto;padding:40px 0 0 0;}

.project-photo-row {width:100%;max-width:670px;display:block;height: auto;min-height: auto;margin:0 auto 20px auto;}        
     
.project-entry-button {text-align:center;}
.project-entry-button-mobile {padding:30px 0 0 0;display:block;margin:0 auto;text-align:center;}

/*photos */
.iprt-def {width: 49.8%;max-width:100%;height: auto;margin:0 0.2% 0.2% 0;object-fit: cover;}
.iprt-last {width: 49.8%;max-width:100%;height: auto;margin:0 0.2% 0.2% 0;object-fit: cover;}


.igallphoto-hover:hover .visitproject {width: 60%;height: 50%;margin: 15%;padding: 24px;}
.project-image-title {font-size: 16px;} 
}

@media only screen and (min-width: 768px) and (max-width: 959px){
.project-container {width:100%;margin:0px auto;}
.portfolio-content {width:95%;margin:0 auto;} 

.project-banner-paragraph h1 {font-size: 18px;}

.project-left {width:95%;float:none;margin:0 auto;}
.project-right {width:100%;float:none;margin:0 auto;padding:40px 0 0 0;}

.project-photo-row {width:100%;max-width:670px;display:block;height: auto;min-height: auto;margin:0 auto 20px auto;}        
     
.project-entry-button {text-align:center;}
.project-entry-button-mobile {padding:30px 0 0 0;display:block;margin:0 auto;text-align:center;} 

/*photos */
.iprt-def {width: 49.8%;max-width:100%;height: auto;margin:0 0.2% 0.2% 0;object-fit: cover;}
.iprt-last {width: 49.8%;max-width:100%;height: auto;margin:0 0.2% 0.2% 0;object-fit: cover;}

.igallphoto-hover:hover .visitproject {width: 60%;height: 50%;margin: 15%;padding: 24px;}
.project-image-title {font-size: 16px;}
}

@media only screen and (min-width: 480px) and (max-width: 767px){
.project-container {width:100%;margin:0px auto;}
.portfolio-content {width:95%;margin:0 auto;} 

.project-banner-paragraph h1 {font-size: 18px;}
.hclientname {display:block;}

.project-left {width:95%;float:none;margin:0 auto;}
.project-right {width:100%;float:none;margin:0 auto;padding:40px 0 0 0;}

.project-photo-row {width:100%;max-width:670px;display:block;height: auto;min-height: auto;margin:0 auto 20px auto;}        
     
.project-entry-button {text-align:center;}
.project-entry-button-mobile {padding:30px 0 0 0;display:block;margin:0 auto;text-align:center;} 

/*photos */
.iprt-def {width:100%;max-width:100%;display:block;height: auto;margin:0 auto 0.2% auto;}
.iprt-last {width:100%;max-width:100%;display:block;height: auto;margin:0 auto 0.2% auto;}

.igallphoto-hover:hover .visitproject {width: 60%;height: 50%;margin: 15%;padding: 24px;}
.project-image-title {font-size: 16px;}
}

@media only screen and (min-width: 320px) and (max-width: 479px){
.project-container {width:100%;margin:0px auto;}
.portfolio-content {width:95%;margin:0 auto;} 

.project-banner-paragraph h1 {font-size: 18px;}
.hclientname {display:block;}

.project-left {width:95%;float:none;margin:0 auto;}
.project-right {width:100%;float:none;margin:0 auto;padding:40px 0 0 0;}

.project-photo-row {width:100%;max-width:100%;display:block;height: auto;min-height: auto;margin:0 auto 20px auto;}        
     
.project-entry-button {text-align:center;}
.project-entry-button-mobile {padding:30px 0 0 0;display:block;margin:0 auto;text-align:center;}  

/*photos */
.iprt-def {width:100%;max-width:100%;display:block;height: auto;margin:0 auto 0.2% auto;}
.iprt-last {width:100%;max-width:100%;display:block;height: auto;margin:0 auto 0.2% auto;}

.igallphoto-hover:hover .visitproject {width: 60%;height: 50%;margin: 15%;padding: 24px;}
.project-image-title {font-size: 16px;}
}