#container_projects { width: 100%;margin: 0; padding:0}

.col-3 { float: left;  
    width: 30.4%; 
   margin-right: 4.2%; 
   margin-bottom:28px;
padding:0;
}


.last { margin-right: 0; }

.url_caption{
   width:100%;
font-family: 'IBM Plex Sans', sans-serif;
   font-weight:500;
   text-align:center;
   letter-spacing:0.02rem;


}



.blur{
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
width:100%;
height:auto;
background-color:#efefef;
position:absolute;
z-index:1;
height:100%;

}

.blur:hover {
filter:alpha(opacity=0);
-moz-opacity:.0;
-khtml-opacity: 0;
opacity: 0;
}





.cap-bot figcaption { left: 0; bottom: -30%;width:99.8%}
.cap-bot:hover figcaption { bottom: 0; }



figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
   margin: 0;


}

figcaption {
   position: absolute;
   
    background:  rgba(0,102,0,1.0);
font-family: 'IBM Plex Sans', sans-serif;
color:#fff;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
   -o-transition:      all 0.6s ease;
   text-transform: uppercase;
  letter-spacing: 0px;
font-size: 11px;
line-height:15px;
font-size: 0.75rem; 
   line-height:1.0rem;
   color:#fff; 
   padding:0;
   padding-top:4px;
   padding-bottom:4px;
 text-align:left;
   text-transform:none;
width:100%
   
}
figure:hover figcaption {
  opacity: 1;
}
/*
figure:before {
  content: "";
  position: absolute;
  font-weight: 800;
  background: rgba(255,0,0,1.0);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.9;
}
figure:hover:before {
  opacity: 0;
}
.cap-bot:before { bottom: 10px; left: 10px; }
*/











@media screen and (max-width:1100px) {
.col-3{width: 45.0%; }
#container_projects { width: 103%}
.last{margin-right:4.2%}
}


/*


@media screen and (max-width:780px) {

  
   figcaption {   opacity: 1;

 padding-top:3px;
   padding-bottom:3px;
}
   .cap-bot figcaption {bottom:0; display:block}


}

*/


@media screen and (max-width:768px) {


.col-3 { float: left;  
   width: 30.0%; 
   margin-right: 3.5%; 
padding:0;
}

.last{margin-right:0;}



}





@media screen and (max-width:670px) {
.col-3{width: 46.0%; }
#container_projects { width: 104.5%}
.last{margin-right:4.2%}
}








@media screen and (max-width:470px) {
   #container_projects { width: 100%}

   .col-3 { 
    margin-right: 0;      
      width:100%; 
border-bottom:1px dotted #555555;
padding-bottom:25px;

   }
   
   .last { 
    margin-right: 0;      
   }
   

   
}