.box {
	float:left;
   width: 29%;
   /*height: 494px;*/
   /*margin: 10px;*/
   margin-left: 30px;
   float: left;
   /*border: 5px solid #fff;*/
   overflow: hidden;
   position: relative;
   text-align: center;
   /*box-shadow: 0px 0px 5px #aaa;*/
   display: block;
   position: relative;
   font-family: 'Marvel', San-seriff;
   


        }

a.link {
   background:url( Link image URL)
   center no-repeat;
   background-size:50px 50px;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9px;
   width:50px;
   height:50px;
   position:relative;
   top:-15px;
   opacity: 0;
   transition: opacity 0.1s 0s ease-in-out;
   font-family: 'Marvel', San-seriff;
          }
.mask {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   opacity: 0;
   overflow:visible;
   border:5px 5px solid rgba(0,0,0,0.9);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
   font-family: 'Marvel', San-seriff;
           }
.mask:hover {
   opacity: 1;
   background-color: rgba(255, 255, 255, 0.76);
   font-family: 'Marvel', San-seriff;
   margin-top: 51px;
   
                    }
.mask:hover a.link {
   opacity:1;
   transition-delay: 0.3s;
   font-family: 'Marvel', San-seriff;
                             }
							 
@media only screen and (max-width: 767px){
	.index-media .block-1 article {
    margin-left: 0px;
    width: 100%;
    float: left;
}
	
	.box{
		width:100%;
	}
	
	.mask{
		width:100%;
	}
}


@media only screen and (max-width: 767px){
    .box{
	width: 52%;
    font-size: 7pt;
	padding-left: 59px;
    
	    padding-bottom: 66px;
    float: left;
}
}