/*********home block transitions and styling****************/
@import url(http://fonts.googleapis.com/css?family=lato);
.view { margin-bottom: 0px; margin-top: 50px; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; background: #fff; margin-right:10px}
.view .mask,.view .content {position: absolute; overflow: hidden; top: 0; left: 0; }
.view img {display: block; position: relative; height: 200px; width: 350px; }
.view h2 {float:left; text-transform: uppercase; color: #fff; text-align: left; position: relative; font-size: 25px; padding: 15px 15px 10px; margin: 0;font-family: "lato"; font-weight: bold}
.view h2 span,
.view a.info span {background: url("../images/system/sprite.png") no-repeat scroll -25px 0 transparent; display: inline-block; height: 10px; width: 10px; margin: 0 0 0 4px;}
.view p { border-top: 1px solid #fff; font-style: normal; font-size: 14px; position: relative; color: #fff; padding: 10px 0; margin: 10px 15px 0px; text-align: left; clear: both;}
.view a.info {display: inline-block; float: left; text-decoration: none; color: #fff; font-family: 'Lato'; margin: 5px 5px 0 15px;}
.view a.info:hover {}

.view.blue .mask {background: rgba(243, 156, 18,0.60);}
.view.orange .mask {background: rgba(52, 73, 94,0.60);}
.view.green .mask {background: rgba(243, 156, 18,0.60);}


.view-first img {
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-first .mask {
   top: 130px;
   bottom: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first p,
.view-first a.info {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.7s linear;
   -moz-transition: all 0.7s linear;
   -o-transition: all 0.7s linear;
   -ms-transition: all 0.7s linear;
   transition: all 0.7s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}

.view-first:hover .mask {top:0;}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p,
.view-first:hover a.info {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}