#view_wrap /* 400 x 400 con 4 imagenes que quiero hacer rotar*/
{
	width:475px;
	height:800px;
	
	border:thin;
	border-color:#030;
		
	position:relative;
	top:0px;
	
    -moz-animation-duration: 10s;  
    -moz-animation-name: ImgRotation;
	-moz-animation-iteration-count: infinite; 
	-moz-animation-timing-function: ease;
	 
	-webkit-animation-duration: 10s;  
    -webkit-animation-name:ImgRotation;
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: ease; 
	 
	-ms-animation-duration: 10s;  
    -ms-animation-name:ImgRotation;
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: ease;  
	
	-o-animation-duration: 10s;  
    -o-animation-name:ImgRotation;  
	-o-animation-iteration-count: infinite; 
	-o-animation-timing-function:ease;
	}
		

@-ms-keyframes ImgRotation {  /* Explorer */
	  
        0% 
		{  
		-ms-transform:translateY(0px); 
        }
		  
		20% {
		-ms-transform:translateY(-200px); 
		}
		
		40% {  
		-ms-transform:translateY(-400px); 
		} 
		
		60% {  
		-ms-transform:translateY(-600px); 
		} 
 
 		80% {  
		-ms-transform:translateY(-800px);
        } 
        100% {  
		-ms-transform:translateY(-1000px); 
        }  
      }  
	  
@-moz-keyframes ImgRotation { /* Firefox */
	  
        0% 
		{  
		-moz-transform:translateY(0px); 
        }
		  
		20% {
		-moz-transform:translateY(-200px); 
		}
		
		40% {  
		-moz-transform:translateY(-400px);
		} 
		
		60% {  
		-moz-transform:translateY(-600px); 
		} 
		
		80%{
		-moz-transform:translateY(-800px); 
			}
 
        100% {  
		-moz-transform:translateY(-1000px); 
        }  
      }  
	  
	  
	 @-webkit-keyframes ImgRotation {   /* Safari and Chrome */
        
 		0% 
		{  
		transform: translateY(0px);
		-webkit-transform:translateY(0px);
        }
		  
		20% {
		transform:translateY(-200px);
		-webkit-transform:translateY(-200px);
		}
		
		40% {  
  		transform: translateY(-400px);
		-webkit-transform: translateY(-400px); 
		} 
		
		60% {  
  		transform: translateY(-600px);
		-webkit-transform:translateY(-600px); 
		} 
		
		80% {
		transform: translateY(-800px);
		-webkit-transform:translateY(-800px); 
			}
 
        100% {  
		transform: translateY(-1000px);
		-webkit-transform: translateY(-1000px); 
        }  
      }  
 

#viewport /* 200 x 200 Visor*/
{
	cursor:pointer;
	position:relative;
	width:475px;
	height:200px;
	overflow:hidden;
	box-shadow:5px 5px 5px #888;
	border:3px #CCC solid;
	border-radius:0px;
	}

.img1
{
	position:relative;
	width:475px; 
	height:200px;
	float:left;
	-webkit-transform-origin: 475 200; /*x y, centro de rotación*/
	/*-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);*/
	}

.img2
{
	position: relative;
	width:475px; 
	height:200px;
	float:left;
	-webkit-transform-origin: 475 200; /*x y, centro de rotación*/
	/*-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);*/
	}
	
.img3
{
	position: relative;
	width:475px; 
	height:200px;
	float: left;
	-webkit-transform-origin: 475 200; /*x y, centro de rotación*/
	/*-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);*/
	}

.img4
{
	position: relative;
	width:475px; 
	height:200px;
	float:left;
	-webkit-transform-origin: 475 200; /*x y, centro de rotación*/
	/*-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);*/
	}

.imgImg
{
		background:rgba(0,0,0,0.2);
	}


/*News 1*/
#view_wrapNews1
{
	width:400px;
	height:200px;
    
	transition-property: all;
	transition-duration: 0.5s;
  	transition-timing-function: ease-out;
  		
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.5s;
  	-webkit-transition-timing-function: ease-out;
  		
	-moz-transition-property: all;
	-moz-transition-duration: 0.5s;
  	-moz-transition-timing-function: ease-out;
	}
		
#viewportNews1:hover #view_wrapNews1
{
	transform: translate(-195px, 0);
	transform: opacity(0.1);
	-webkit-transform: translate(-195px, 0);
	-webkit-transform: opacity(0.1);
	-moz-transform: translate(-195px, 0);
	-moz-transform: opacity(0.1);
	}
		
#viewportNews1
{
	cursor:pointer;
	background-image: url(../imagenes/productos3.png);
	position:relative;
	width:200px;
	height:200px;
	overflow:hidden;
	box-shadow:5px 5px 5px #888;
	border: 1px solid #ccc;
	border-radius:10px;
	}
		
.textoNews1
{
    top:30px;
	width:180px;
	padding-left:10px;
	padding-right:10px;
	height:230px;
	float:right;
	}

.imgNews1
{
	position: relative;
	left:0px;
	top:0px;
	width:180px; 
	height:180px;
	float:left;
	}
	
.imgImgNews
{
	border-radius:0px;
	}

/*News 2*/
#viewportNews2
{
	position:relative;
	width:200px;
	height:200px;
	overflow:hidden;
	box-shadow:5px 5px 5px #888;
	border: 1px solid #ccc;
	border-radius:10px;
	
	
	background: #ffffff; 
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e8e8e8 100%);     
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8));
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%); 
    background: radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%);   
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=1 ); 
    position:relative;
	}
	
#viewportNews2:hover
{
    border: 1px solid #a5c765;
    
    background: #ffffff; 
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e5f0d1 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5f0d1));
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%); 
    background: radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5f0d1',GradientType=1 ); 
    position:relative;
    }
	
/*News 3*/
#viewportNews3
{
	position:relative;
	width:200px;
	height:200px;
	overflow:hidden;
	box-shadow:5px 5px 5px #888;
	border: 1px solid #ccc;
	border-radius:10px;
	
	background: #ffffff; 
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e8e8e8 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8));
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%); 
    background: radial-gradient(center, ellipse cover,  #ffffff 0%,#e8e8e8 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=1 ); 
    position:relative;
	}
	
#viewportNews3:hover
{
    border: 1px solid #a5c765;
    
    background: #ffffff; 
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e5f0d1 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5f0d1));
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%); 
    background: radial-gradient(center, ellipse cover,  #ffffff 0%,#e5f0d1 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5f0d1',GradientType=1 ); 
    position:relative;
    }

.intNews
{
    padding:15px;
    }