.view {
    width: 320px;
    height: 240px;
    /*margin: 10px;
    float: left;
    border: 10px solid #fff;
	box-shadow: 1px 1px 2px #e6e6e6;
	background: #fff url(../images/bgimg.jpg) no-repeat center center
	text-align: center;*/
     overflow: hidden;
   /*position: relative;*/
    
    
    cursor: default;
    
}
.view2 {
    width: 644px;
    height: 484px;
    /*margin: 10px;
    float: left;
    border: 10px solid #fff;
	box-shadow: 1px 1px 2px #e6e6e6;
	background: #fff url(../images/bgimg.jpg) no-repeat center center
	text-align: center;*/
     overflow: hidden;
   /*position: relative;*/
    
    
    cursor: default;
    
}
.view .mask, .view .content {
    width: 320px;
    height: 240px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view2 .mask, .view2 .content {
    width: 644px;
    height: 484px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img, .view2 img {
    display: block;
    position: relative;
}
.view h2 {
    position: relative;
	padding: 10px;
	border:#f00 1px solid;
	color: #fff;/*
	
    
    
    
    font-size: 17px;
    
    text-transform: uppercase;
	text-align: center;
	
	background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0*/
}
.view p, .view2 p {
    position: relative;
	padding: 10px;/*font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    
    color: #fff;
    
    text-align: center*/
}
.view a.info {
	padding:10px;
    /*display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000*/
}
.view a.info:hover {
    /*box-shadow: 0 0 5px #000*/
}

/*animate*/
.view-tenth img { 
    transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	
    transition: all 0.7s ease-in-out;
	-webkit-transition: all 0.7s ease-in-out;
}
.view-tenth .mask { 
    background-color:#C03;
    transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
    opacity: 0;
}   
.view-tenth h2{
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;color: #333;*/
    transform:scale(0);
	-ms-transform:translateY(300px);
	-webkit-transform:translateY(300px);
	
    
    transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
    opacity: 0;
}
.view-tenth p {
    /*color: #333;*/
    opacity: 0;
    transform:translateY(300px);
	-ms-transform:translateY(300px);
	-webkit-transform:translateY(300px);
	
    transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
}
.view-tenth a.info { 
    opacity: 0;
    transform:translateY(300px);
	-ms-transform:translateY(300px);
	-webkit-transform:translateY(300px);
	transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
	
}
.view-tenth:hover img { 
    transform: scale(10);
	-ms-transform: scale(10);
	-webkit-transform: scale(10);
	
    opacity: 0;
}
.view-tenth:hover .mask { 
    opacity: 1;
}                                                                            
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{ 
    transform:translateY(0px);
	-ms-transform:translateY(0px);
	-webkit-transform:translateY(0px);
	
    opacity: 1;
}


/* font style */
p {
	line-height:1.5em;
	font-style:normal;
	font-weight:100;
	font-size:112.5%;
	color:#fff;
}
.ls { letter-spacing:0.2em; }
h1, .bl-icon:before {
	font-weight:100;
	font-size:200%;
	padding:10px;
}
.fs_small { font-size:68.75%; }