.center{display:inline-block}.col{float:left}.smd1{width:100%}.smd2{width:50%}.smd3{width:33%}.smd4{width:25%}.smd5{width:20%}.gutter{padding:15px}.grid{width:100%;float:left;margin:0;padding:0;list-style:none}.grid ul{padding:0;margin:0;list-style:none;width:100%;float:left}.grid li{display:block;margin:0;float:left;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}.hover-effect{width:100%;float:left;position:relative;overflow:hidden}.hover-effect i{width:58px;height:58px;background-image:linear-gradient(to right,#1D3666,#89C240);border-radius:50%;color:#fff;position:absolute;left:50%;top:-100px;z-index:1;line-height:58px;font-size:24px;text-align:center;margin:0 0 0 -29px;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.hover-effect:hover i{top:50%;margin:-29px 0 0 -29px}.hover-effect:hover i:hover{background-image:linear-gradient(to left,#1D3666,#89C240)}.hover-effect img{display:block;-moz-transition:all 7s ease;-o-transition:all 7s ease;-webkit-transition:all 7s ease;transition:all 7s ease;width:100%}.hover-effect:hover img{-moz-transform:scale(1.5,1.5);-ms-transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5)}.hover-effect:after{background:#FFF;width:0;height:0;position:absolute;left:50%;bottom:50%;content:'';opacity:.7;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}.hover-effect:hover:after{opacity:.1;width:100%;height:100%;left:0;bottom:0}.hover-effect h2{position:absolute;left:0;bottom:0;width:100%;margin:0;padding:10px;line-height:normal;text-align:center;font-weight:500;font-size:14px;color:#fff;background-color:rgba(0,0,0,.5)}.bordered{border:10px solid #fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.4);-moz-box-shadow:0 1px 4px rgba(0,0,0,.4);box-shadow:0 1px 4px rgba(0,0,0,.4)}@media only screen and (max-width:768px){.smd2,.smd3,.smd4,.smd5{width:50%}.hover-effect h2{padding:5px;font-size:12px}.bordered{border:4px solid #fff}}@media only screen and (max-width:480px){.smd2,.smd3,.smd4,.smd5{width:100%}.smd4{width:50%}.gutter{padding:5px}.hover-effect i{width:30px;height:30px;line-height:30px;font-size:14px;margin:0 0 0 -15px}.hover-effect:hover i{margin:-15px 0 0 -15px}}