.view {
   width: 100%;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #f4e3b8;
}
.view .mask,.view .content {
   width: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view .bg_box {
   display: block;
   position: relative;
   width:100%;
}
.view .box_freccia_sx, .view .box_freccia_dx {
   position: absolute;
   top:0;
   left:0;
   width:100%;
   height:200px;
   
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.view .box_freccia_sx img {
    position: absolute;  
    top: 0;  
    bottom: 0;  
    right: 0;  
    margin: auto;  
}

.view .box_freccia_dx img {
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    margin: auto;  
}
.view .box_img {
   position: absolute;
   top:0;
   left:0;
   width:100%;
   height:200px;
}

.view .box_img img {
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
}

.view-first .bg_box {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(244,227,184, 0.5);
   -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:hover .bg_box {
   -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 .box_freccia_dx, .view-first:hover .box_freccia_sx  {top:10px}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.view-first .mask { height: 200px; }
@media (min-width: 768px) {
	  .view-first .mask { height: 200px; }
	  .view .box_img { height: 200px; }
	  .view .box_freccia_sx, .view .box_freccia_dx { height: 200px; }
	}
	@media (min-width: 992px) {
	 .view-first .mask { height: 211px; }
	 .view .box_img { height: 211px; }
	 .view .box_freccia_sx, .view .box_freccia_dx { height: 211px; }
	}
	@media (min-width: 1200px) {
	  .view-first .mask { height: 255px; }
	  .view .box_img { height: 255px; }
	  .view .box_freccia_sx, .view .box_freccia_dx { height: 255px; }
	}
	@media (min-width: 1601px) {
		.view-first .mask { height: 350px; }
		.view .box_img { height: 350px; }
		.view .box_freccia_sx, .view .box_freccia_dx { height: 350px; }
	}
				