@charset "utf-8";
/* CSS Document */

body{
	background:url(graf/bg.jpg) center top no-repeat #FFF;	
	margin:0;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#404040;
}

a{
	text-decoration:none;
	font:bold 11px Verdana, Geneva, sans-serif;
	color:#611106;
}
p{
	margin:18px 0;
	line-height:16px;	
}
a img{
	border:none;	
}
a:hover{
	color:#db5249;	
}


h1{
	font:bold 12px Verdana, Geneva, sans-serif;
	color:#611106;
	margin:10px 0 10px 0;
	background:url(graf/bg-puntos.gif) center bottom repeat-x;
	padding:0 0 4px 20px;
}

h2{
	font:bold 10px Verdana, Geneva, sans-serif;
	margin:0;
	padding:0 0 4px 10px;
}
h2 a{
	font:bold 10px Verdana, Geneva, sans-serif;
	color:#FFF;
}
h2 a:hover{
	color:#e58989;
}

h3{
	margin:10px 0 20px 0;
}
h3 a{
	background:#821912;
	font:bold 11px Verdana, Geneva, sans-serif;
	color:#FFF;
	padding:4px 0 4px 6px;
	display:block;
}
h3 a:hover{
	background:#cf301a;
	color:#FFF;
}

h4{
	background:url(graf/h-largo.gif) no-repeat;
	font:bold 11px Verdana, Geneva, sans-serif;
	color:#FFF;
	padding:0px 20px;
	margin:0 0 30px 0;
	text-transform:uppercase;
	letter-spacing:2px;
}
h5{
	background:url(graf/h-largo.png) no-repeat;
	font:bold 11px Verdana, Geneva, sans-serif;
	color:#FFF;
	padding:8px 0 10px 20px;
	margin:10px 0 20px 0;
	text-transform:uppercase;
}


/************************************************************ top */
#top{
	width:978px;
	height:366px;
	margin:0 auto;
	position:relative;

}
#top .logo{
	position:absolute;
	top:114px;
	left:42px;
	border:3px solid #009945;
}
#top .logo:hover{
	border:3px solid #FFF;
}

/************************************************************ estructura */
#contenedor{
	overflow:hidden;
	width:955px;
	margin:0 auto;
	padding:35px 0 0 0;	
}
#columna-izquierda{
	width:296px;
	float:left;
	margin-left:12px;
	padding-bottom:10px;
}
#columna-izquierda span{
	display:block;
	text-align:center;
	margin:50px 0 0 0;
}
#columna-izquierda span img, #columna-izquierda span a img{
	margin:10px 0;
}
#columna-izquierda h1{
	margin-bottom:30px;
}

#modulo-principal{
	width:606px;
	float:right;
	overflow:hidden;
}
#modulo-principal .modulos{
	overflow:hidden;
}


/************************************************************ contenidos*/
.presentacion{
	position:relative;
	height:134px;
	padding:2px 0 40px 256px;
	text-align:justify;
	background:url(graf/bg-puntos.gif) center bottom repeat-x;
}
.presentacion img{
	position:absolute;
	top:0;
	left:0;	
}
.presentacion strong{
	color:#000;
}
.presentacion p{
	margin:12px 0;
}

.modulo-calidad-home{
	float:left;
	width:234px;	
	margin:30px 0;
}
.modulo-calidad-home span{
	background:url(graf/h-corto.png) no-repeat;
	height:32px;
	position:relative;
	display:block;
}
.modulo-calidad-home span h2{
	position:absolute;
	top:8px;
	left:0px;
}
.modulo-calidad-home span a img{
	position:absolute;
	top:8px;
	right:12px;
}
.modulo-calidad-home .foto{
	border:1px solid #9b9b9b;
	margin:18px 0 0 0;
}
.modulo-calidad-home .foto:hover{
	border:1px solid #dbdbdb;
}
.modulo-calidad-home p{
	text-align:justify;
	margin:24px 0;
	line-height:18px;
}

.modulo-visitas-home{
	float:right;
	width:354px;
	margin:30px 0;
}
.modulo-visitas-seccion{
	margin:30px 0;	
}
.modulo-visitas-home span, .modulo-visitas-seccion span{
	background:url(graf/h-mediano.png) no-repeat;
	height:50px;
	position:relative;
	display:block;
}
.modulo-visitas-home span h2, .modulo-visitas-seccion span h2{
	position:absolute;
	top:8px;
	left:0px;
}
.modulo-visitas-home span a img, .modulo-visitas-seccion span img{
	position:absolute;
	top:8px;
	right:12px;
}
.modulo-visitas-home .visita, .modulo-visitas-seccion .visita{
	text-align:right;
	position:relative;
	height:auto;
	overflow:hidden;
	padding:0;	
}
.modulo-visitas-seccion .visita{
	text-align:left;
	margin:0 0 20px 0;
	border-bottom:1px solid #E4E4E4;
}
.modulo-visitas-seccion .visita p{
	font-size:11px;
	margin:0 0 0 6px;
	float:left; width:65%
}
.modulo-visitas-seccion .visita h3{
	margin-bottom:5px;
}
.modulo-visitas-home .visita a img, .modulo-visitas-seccion .visita a img{
	position:relative;
	float:right;
	width:30%;
	border:1px solid #9b9b9b;
	padding:2px;
}
.modulo-visitas-home .visita a:hover img, .modulo-visitas-seccion .visita a:hover img{
	border:1px solid #dbdbdb;
}
.modulo-visitas-home .visita strong, .modulo-visitas-seccion .visita strong{
	color:#7f7f7f;
	font:bold 9px Verdana, Geneva, sans-serif;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
	display:block;
}

.modulo-visitas-home .ver-fotos {
	position:absolute;
	bottom:0px;
	right:140px;	
	font-size:10px;
}
.modulo-visitas-seccion .ver-fotos{
	position:absolute;
	bottom:35px;
	right:200px;	
	font-size:10px;
}
.modulo-visitas-seccion .ver-fotos{
	bottom:0px;	
}

.ficha-visitas{
	margin:20px 0;
	border-bottom:2px solid #E4E4E4;
	padding-bottom:20px;
}
.ficha-visitas strong{
	color:#7f7f7f;
	font:bold 9px Verdana, Geneva, sans-serif;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
	display:block;
}

.galeria-fotos-visitas{
	list-style:none;
	margin:0 0 0 10px;
	padding:0;
	overflow:hidden;
}
.galeria-fotos-visitas li{
	width:170px;
	text-align:center;
	float:left;
	margin:10px;
	height:170px;
}
.galeria-fotos-visitas a img{
	margin:0 0 5px 0;
	border:1px solid #CCC;
	padding:2px;
}
.galeria-fotos-visitas a:hover img{
	border:3px solid #821912;
	padding:0;
}
.galeria-fotos-visitas p{
	margin:0;
	font-size:11px;
}


.accesos-bondiolas, .accesos-salames, .accesos-jamones, .accesos-cortes-cerdo{
	padding:38px 0 42px 110px;
	display:block;
	margin:10px 0 0 20px;
}
.accesos-bondiolas{
	background:url(graf/bondiolas-grion.png) no-repeat;
}
.accesos-salames{
	background:url(graf/salames-grion.png) no-repeat;	
}
.accesos-jamones{
	background:url(graf/embutidos-frescos-grion.png) no-repeat;
}
.accesos-cortes-cerdo{
	background:url(graf/cortes-cerdo-grion.png) no-repeat;	
}

/************************************************************ productos*/
.listado-productos{
	list-style:none;
	margin:0;
	padding:0;	
}
.listado-productos li{
	overflow:hidden;
	height:170px;
	margin:10px 0 20px 0;
	border-bottom:1px dashed #ccc;
}
.listado-productos li a img{
	width:184px	;
	height:144px;
	border:1px solid #dbdbdb;
	padding:2px;
	float:right;
}
.listado-productos li a:hover img{
	border:1px solid #9b9b9b;
}
.listado-productos li span{
	float:left;
	width:400px;
}
.listado-productos li h3{
	margin-top:4px;
}

.paginado{
	display:block;
	padding:5px;
	text-align:center;
	font:bold 14px Verdana, Arial, Helvetica, sans-serif;
	margin:0 0 30px 0;
	border:1px dashed #CCC;
}
.paginado a{
	margin:0 2px;
	color:#000;
	padding:2px 6px;
	color:#821912;
}
.paginado a:hover{
	color:#ccc !important;
}
.paginado-activo{
	color:#ccc;
	margin:0 2px;
	padding:2px 6px;
}

.ficha-producto{
	margin:20px 0;
	overflow:hidden;
	border-bottom:2px solid #E4E4E4;
	padding-bottom:20px;
}
.ficha-producto span{
	border:1px dashed #CCC;
	padding:0 10px;
	display:block;
	float:right;
	width:390px;
}
.ficha-producto a img{
	width:184px	;
	height:144px;
	border:1px solid #dbdbdb;
	padding:2px;
	float:left;
}
.ficha-producto a:hover img{
	border:1px solid #821912;
}

.ficha-producto h3{
	background:#821912;
	font:bold 11px Verdana, Geneva, sans-serif;
	color:#FFF;
	padding:4px 0 4px 18px;
	display:block;
}

.titulo-galeria{
	background:url(graf/galeria.png) 18px 0 no-repeat;
	font:bold 10px Verdana, Geneva, sans-serif;	
	color:#000;
	border-bottom:1px dashed #CCC;
	padding:6px 0 8px 55px;
	margin:10px 0 30px 0;
}
.galeria-fotos{
	margin:10px 0 20px 0;
}
.galeria-fotos a img{
	margin:0 4px;
	border:1px solid #dbdbdb;
	width:284px;
	height:222px;
}
.galeria-fotos a:hover img{
	border:1px solid #821912;
}


.listados{
	list-style:none;
	margin:0 0 40px 20px;
	padding:0;	
}
.listados li{
	margin:10px 0;
	background:url(graf/items.png) no-repeat;
	padding:0 0 4px 20px; 	
}
.listados li a{
	font-size:10px;
}
.listados li strong{
	font:bold 11px Verdana, Geneva, sans-serif;
	color:#000;
}

.texttos-justificados{
	text-align:justify;
	margin-bottom:40px;	
}
.texttos-justificados strong{
	color:#000;
}

/************************************************************ pie*/
#pie{
	background:url(graf/bg-pie.png) center top no-repeat;
}
#pie div{
	height:230px;
	position:relative;
	text-align:center;
	padding-top:20px;
	width:940px;
	margin:0 auto;
	font-size:11px;
}
#pie div .copyright{
	color:#808080;
	font:bold 9px Verdana, Geneva, sans-serif;
	margin:0;
	position:absolute;
	top:162px;
	left:286px;	
}
#pie div .copyright a{
	font:bold 9px Verdana, Geneva, sans-serif;
}

#pie div .firma{
	color:#7f7f7f;
	font:normal 11px Arial, Helvetica, sans-serif;
	margin:0;
	position:absolute;
	bottom:20px;
	right:50px;	
}


/************************************************************ contacto */
.form-contacto{
	margin:0 25px 10px 0;
	padding:20px 100px 20px 20px;
	text-align:right;
}
.form-contacto form label{
	display:block;
	margin:10px 0;
}
.form-contacto form label input[type=text], .form-contacto form label textarea, .form-contacto form label select{
	border:1px solid #CCCCCC;
	background-color:#FFFFFF;
	width:250px;
	padding:3px 5px;
	font:normal 11px Arial, Helvetica, sans-serif;
	vertical-align:middle;
	margin-left:10px;
}
.form-contacto form label select{
	width:262px;
}
.form-contacto form label input[type=submit], .form-contacto form label input[type=button]{
	border:none;
	padding:5px 10px;
	background:#821912;
	cursor:pointer;
	font:bold 10px Verdana, Arial, Helvetica, sans-serif;
	color:#FFF;
	margin:5px 0;
	width:119px;
} 
.form-contacto form input[type=submit]:hover, .form-contacto form input[type=button]:hover{
	background:#000;
	color:#FFF;
}

.envio-correcto{
	text-align:center;
	font:bold 11px Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	padding:20px;
	line-height:24px;
	border:1px dashed #CCC;
}

/*--css responsive--*/

@media only screen and (min-width: 768px) and (max-width: 980px) {

	body { background:rgba(0, 0, 0, 0) url("graf/bg.jpg") no-repeat scroll 57% top }
	
	h4 { letter-spacing:0 }

	#contenedor, #top, ul.dropdown, #pie div  { width: 680px }
		
	#columna-izquierda { width:240px; background-color:#ededed; border-radius:10px }

	.igualarAltura { height:auto !important }
	
	.presentacion { height:254px; padding:5px }
	
	.presentacion p { position:relative; top:130px }
		
	.modulo-calidad-home { width:100% }

	#modulo-principal { width: 380px; }
	
	.listado-productos li span { float:none; width:100% }
	
	.listado-productos li { height:auto }
	
	.listado-productos li a img { width:30%; height:auto }
	
	.ficha-producto span { float:none; width:100%; padding:0px }
	
	.ficha-producto a img { float:none; }
	
	.modulo-visitas-seccion .ver-fotos { position:relative; right:0px; padding-left:10px }
	
	.modulo-visitas-home .visita, .modulo-visitas-seccion .visita { height:auto; padding:0px }
	
	.modulo-visitas-home .visita a img, .modulo-visitas-seccion .visita a img { position:relative; right:0; top:0 }
		
	#top .iconos-facebook, #top .iconos-twitter, #top .iconos-youtube { top:105px }
	
	#pie div { height:265px }
	  
img {
    max-width: 100%;
	height:auto
}
}



@media only screen and (max-width: 767px) {

body { background: rgba(0, 0, 0, 0) url("graf/bg-resp.jpg") no-repeat scroll 63% top }
  
	.igualarAltura{ height:auto !important }
	
	#modulo-principal  { width:100% }
  
  label { display:block } 
  
  h4 { letter-spacing:0 }
  
  #top .iconos-facebook, #top .iconos-twitter, #top .iconos-youtube { top:105px }

  #contenedor, #modulo-principal, #top, #pie div  { width: 600px }

  #columna-izquierda { float: none; width: 95%; margin-bottom:20px; background-color:#ededed; border-radius:10px; padding:10px; height:auto !important }
  
  #columna-izquierda span { display:inline }
  
  	.presentacion { height:274px; padding:5px }
	
	.presentacion p { position:relative; top:130px }
  
  .modulo-calidad-home, .modulo-visitas-home { width:100%; float:none  }
  
  	.listado-productos li span { float:none; width:100% }
	
	.listado-productos li { height:auto }
	
	.listado-productos li a img { width:30%; height:auto }
	
	.ficha-producto span { float:none; width:100%; padding:0px }
	
	.ficha-producto a img { float:none; width:100%; height:auto }

  	.modulo-visitas-home .ver-fotos { position:relative; right:20px; padding-left:10px }
	
	.modulo-visitas-seccion .ver-fotos { position:relative; right:0px; padding-left:10px }
	
	.modulo-visitas-home .visita, .modulo-visitas-seccion .visita { height:auto; padding:0px }
	
	.modulo-visitas-home .visita a img, .modulo-visitas-seccion .visita a img { position:relative; right:0; top:0 }

  
  #top .logo { left: 10px; }
    
   #pie div { height:245px }
   
   #pie div .copyright { top:172px; left:0px }
      
img {
    max-width: 100%;
	height:auto
}
	}



	@media only screen and (max-width: 560px) {
	
	body { background: rgba(0, 0, 0, 0) url("graf/bg-resp.jpg") no-repeat scroll 70% top }

  #contenedor, #modulo-principal, #top, #pie div  { width: 430px }
  
    #top .logo { top:45px }
	
	#pie div { height:255px }
	
   #pie div .copyright { top:192px; }


	}



	@media only screen and (max-width: 480px) {

  #contenedor, #modulo-principal, #top, .lof-slidecontent, #pie div { width: 300px }
  
  .form-contacto form label input[type="text"], .form-contacto form label textarea, .form-contacto form label select { width: 100%; margin-left: 0px  }
  
  .form-contacto { text-align: left; padding: 20px }
    
  #top .logo { top:145px; left:20% }
  
  #columna-izquierda { width:90% }
  
  h1 { padding:0px }
  
	}



@media only screen and (max-width: 320px) {

  #contenedor, #modulo-principal, #top, #pie div  { width: 250px }
  	
	#pie div .copyright { top:212px  }
	
	#pie div { height:285px }
	
	#pie div .firma { top:250px }

	}
.whatsapp-flotante{position:fixed;right:7px;top:100px;z-index:100;}	
/*--fin css responsive--*/