.main{float:left; margin-top:20px; width:100%;}
.view {
   margin:10px 16px 3px 0px !important;
   float: left;
   max-width:363px;
   overflow: hidden;
   position: relative;
   text-align: center;
   border:1px solid #dddddd;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
   margin:15px auto auto auto;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
h3{font-size:20px;font-family: "Open Sans",sans-serif,Arial,Helvetica; margin:10px 0px 0px 0px;}
.view p {
   font-family: "Open Sans",sans-serif,Arial,Helvetica;
   font-size:14px;
   position: relative;
   color: #000;
   padding: 10px 20px 20px;
   text-align: center;
}
.view p:hover{
   font-family: "Open Sans",sans-serif,Arial,Helvetica;
   font-size: 14px;
   position: relative;
   color: #000;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}


@media all and (min-width:749px){
	.view{}
}
@media screen and (min-width:727px) and (max-width:993px){
	.view{max-width:363px; margin:3px !important; }
}
@media all and (max-width:738px){
	.view{margin:20px auto 10px auto !important;}	}

@media all and (max-width:360px){
	.view{margin:20px 5px 10px 5px !important;}	
	}

.view-ninth:hover .content {
    height: 120px;
    width:100% !important;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px, 0px);
}
}
@media screen and (width:320px){
.view-ninth:hover.mask-1 {
    transform: rotate(53deg) translateX(1px) !important;
}
.view-ninth:hover.mask-2{
    transform: rotate(53deg) translateX(1px) !important;
}
.view-ninth:hover{
    transform: rotate(53deg) translateX(1px) !important;
}
.view-ninth:hover{
    transform: rotate(53deg) translateX(1px) !important;
}
.mask-1 {
    transform: rotate(53deg) translateX(1px) !important;
}
.mask-2{
    transform: rotate(53deg) translateX(1px) !important;
}
}