.base img {
	width: 250px;
	height: auto;
}
.shape {
    width: 250px;
    height: 250px;
    position: relative;
    text-indent: 0px;
}
        
    .shape .overlay {
        display:block;
        width: 260px;
        height: 260px;
        position: absolute;
        top:-5px;
        left:-5px;
        -webkit-transform: scale(1,1);
        -webkit-transition-timing-function: ease-out;
        -webkit-transition-duration: 0.6s;
        -moz-transform: scale(1,1);
        -moz-transition-timing-function: ease-out;
        -moz-transition-duration: 0.6s;
        transform: scale(1,1);
        transition-timing-function: ease-out;
        transition-duration: 0.6s;                
        z-index:500;
        /* allow user to actually perform actions underneath this layer */
        pointer-events:none; 
        background-repeat: no-repeat;
    }
/* different shapes */
.shape .overlay.round {
    background: url(../images/round.png);       
}
.shape .overlay.hexagon {
    background: url(hexagon.png);
}
.shape .overlay.pentagon {
    background: url(../images/z.png);
}            
/* hover effect */
.shape:hover .overlay {
    -webkit-transform: scale(1.07,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 0.3s;
    -moz-transform: scale(1.07,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 0.3s;
}
.shape:hover .bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
  display:block;
}
.shape:hover .details {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
    z-index:450;
  display:block;    
}    
        
        
/* content styles */
.shape .bg, 
.shape .details {
    position: absolute;
    width: 250px;
    height:250px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    top:0;
    left:0;
    opacity:0;
    -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;                
    display:none;  
}        
.shape .bg {
    background: #2ECC71;        
}
.shape .details span.heading {        
    font-size:16px;
    font-weight: lighter;
    display:block;
    margin:70px 12px 20px 10px;
    color:#fff;
    text-decoration:none;
    padding: 0px 25px;
}
.shape .details p {
    color:#fff;
    font-size:14px;
    margin:0 auto;
    
    
}
.shape a.button {
    padding:8px 18px 6px 12px;    
    font-size:12px;    
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    background: #2f3644;
    text-decoration:none;
    color:#fff;
    display:block;
    width: 90px;
    margin:0 auto;
    text-align:center;
    margin-top:30px;
    
}
.shape a.button:hover {
    background: #fff;
    color: #2f3644;                
    }