.sqgal *{ margin:0px; padding:0px; vertical-align:middle;}
.sqgal .pic{ min-height:20px; position:relative; display:inline-block; overflow:hidden; box-sizing:border-box;}
.sqgal .pic:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.sqgal .pic .bg{ background-position:center center; background-size:cover; background-repeat:no-repeat; position:absolute; top:0px; bottom:0px; left:0px; right:0px; -webkit-transition: All 100ms linear; -moz-transition: All 100ms linear; -o-transition: All 100ms linear; -ms-transition: All 100ms linear; transition: All 100ms linear;}
.sqgal .pic:hover .bg{ margin:-10%; -webkit-transition: All 100ms linear; -moz-transition: All 100ms linear; -o-transition: All 100ms linear; -ms-transition: All 100ms linear; transition: All 100ms linear;}
.sqgal .pic .a{ display:none; position:absolute; top:0px; bottom:0px; left:0px; right:0px;/* background:center center url(/include/sqgal/zoom.png) no-repeat rgba(255,255,255,0); */ -webkit-transition: All 100ms linear; -moz-transition: All 100ms linear; -o-transition: All 100ms linear; -ms-transition: All 100ms linear; transition: All 100ms linear;}
.sqgal .pic .a i{ position:absolute; top:50%; left:50%; font-size:40px; margin-top:-20px; margin-left:-20px;}
.sqgal .pic:hover .a{ display:inline-block;}
.sqgal .pic .a:hover{ background-color:rgba(255,255,255,0.2); -webkit-transition: All 100ms linear; -moz-transition: All 100ms linear; -o-transition: All 100ms linear; -ms-transition: All 100ms linear; transition: All 100ms linear;}
.sqgal.big .pic{ width:25%;}
.sqgal.med .pic{ width:25%;}
.sqgal.tin .pic{ width:50%;}