/* CSS Document */

@font-face {
    font-family: 'helveticaneue-medium';
    src: url('../tipo/henm__-webfont.eot');
    src: url('../tipo/henm__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../tipo/henm__-webfont.woff2') format('woff2'),
         url('../tipo/henm__-webfont.woff') format('woff'),
         url('../tipo/henm__-webfont.ttf') format('truetype'),
         url('../tipo/henm__-webfont.svg#helveticaneue-mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'helveticaneue-roman';
    src: url('../tipo/henr_-webfont.eot');
    src: url('../tipo/henr_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../tipo/henr_-webfont.woff2') format('woff2'),
         url('../tipo/henr_-webfont.woff') format('woff'),
         url('../tipo/henr_-webfont.ttf') format('truetype'),
         url('../tipo/henr_-webfont.svg#helveticaneue-romanregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Helvetica Neue LT Std';
    src: url('../tipo/subset-HelveticaNeueLTStd-Lt.eot');
    src: url('../tipo/subset-HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'),
        url('../tipo/subset-HelveticaNeueLTStd-Lt.woff2') format('woff2'),
        url('../tipo/subset-HelveticaNeueLTStd-Lt.woff') format('woff'),
        url('../tipo/subset-HelveticaNeueLTStd-Lt.ttf') format('truetype'),
        url('../tipo/subset-HelveticaNeueLTStd-Lt.svg#HelveticaNeueLTStd-Lt') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


strong {
	font-family: 'helveticaneue-medium', Arial, Helvetica, sans-serif;
	font-weight:normal;
	}

h1 {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.375em;
	line-height:1.2em;
	color:#ef7c00;
	letter-spacing:1px;
	text-transform:uppercase;
	}
	
h2 {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.375em;
	line-height:1.2em;
	color:#b7274c;
	letter-spacing:1px;
	text-transform:uppercase;
	}
	
h3 {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.250em;
	letter-spacing:1px;
	}
	
h4 {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.125em;
	line-height:1.1em;
	color:#fff;
	}
	
h5 {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.85em;
	letter-spacing:1px;	
	}

h6 {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.25em;
	letter-spacing:1px;
	}
	
a {
	text-decoration:none;
	color:#ef7c00;
	}

p {
	font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
	font-size:1.125em;
	line-height:1.25em;
	letter-spacing:1px;
	}
	
.naranja{
	color:#ef7c00;
	}

.bordo{
	color:#b7274c;
	}

.fucsia{
	color:#de0064;
	}
	
.violeta{
	color:#604696;
	}

.celeste{
	color:#66c1be;
	}

.verde{
	color:#86bc24;
	}
	
.amarillo{
	color:#efd500;
	}

img {
	max-width:100%;
	height:auto;
	box-sizing:border-box; /* descuenta borde */
	}
	

/* CELULAR */


html, body {
	margin:0;
	padding:0;
	font-size:90%;
	color:#58595b;
	}

.contenedor {
	width:100%;
	position: relative;
	overflow: hidden;
	height:auto;
	}
	
	header {
		position:relative;
		}
		
		.cabezal{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			z-index:1000 !important;
			border-top: #ef7c00 solid 2px;
			}
			
			.pre {
				background:url(../img/premium-cabezal-C.jpg) no-repeat top center;
				background-size:cover;
				position:relative;
				height:25em;
				}
			
			.imp {
				background:url(../img/impresas-cabezal-C.jpg) no-repeat top center;
				background-size:cover;
				position:relative;
				height:25em;
				}
				
			.acr {
				background:url(../img/acrilicas-cabezal-C.jpg) no-repeat top center;
				background-size:cover;
				position:relative;
				height:25em;
				}
				
			.mas {
				background:url(../img/masking-cabezal-C.jpg) no-repeat top center;
				background-size:cover;
				position:relative;
				height:25em;
				}
				
			.fil {
				background:url(../img/film-cabezal-C.jpg) no-repeat top center;
				background-size:cover;
				position:relative;
				height:25em;
				}
				
			.productos{
				text-align:left;
				top:18.35em;
				width:80%;
				padding:0 10% 10% 10%;
				font-size:1.25em;
				position:absolute;
				z-index:0;
				}
				
				.detalle{
					color:#58595b;
					margin-top:0.5em;
					}
					
					.detalle p{
						line-height:1.05em;
						font-size:0.85em;
						}
					
	
	.logo a{
		background: url(../img/packagingyservicios-C.png) no-repeat left;
		width:90%;
		margin-left:10%;
		display:block;
		height:100px;
		}
		
		
	.callbacks_container {
		z-index:0;
		display:none;
		}
		
	.callbacks_container2 {
		z-index:0;
		padding-top:100px;
		}
		
	.callbacks_container3 {
		z-index:0;
		display:none;
		}
	
	main{
		position:relative;
		}
		
	.contenido {
		width:100%;
		text-align:center;
		}
		
		.fila {
			position:absolute;
			top:10em;
			left:0;
			z-index:100;
			}
	
	.espacio {
		margin:5% 0 5% 0;
		width:100%;
		float:left;
		}
		
		.bloque1 li {
			width:100%;
			text-align:left;
			float:left;
			border-bottom:thin solid #de0064;
			margin-bottom:0;
			overflow:hidden;
			}
			
			.bloque1 li a{
				width:80%;
				display:block;
				padding:8% 10% 0 10%;
				margin-top:30%;
				line-height:1.4em;
				background:rgba(222, 0, 100, 0.15);
				transition: 0.5s;
				color:#de0064;
				}
			
			.bloque1 li a:hover{
				background:rgba(222, 0, 100, 0.5);
				padding:38% 10% 0 10%;
				margin-top:0;
				transition: 0.5s;
				}
				
				.premium {
					background:url(../img/premium.jpg) no-repeat top right;
					background-size: cover;
					}
					
					.premium2 {
						width:114%;
						padding:3% 0 8% 12%;
						margin-left:-12%;
						color:#de0064;
						background:#FFF;
						float:left;
						}
				
		.bloque2 li {
			width:100%;
			text-align:left;
			float:left;
			border-bottom:thin solid #86bc24;
			margin-bottom:1px;
			overflow:hidden;
			}
			
			.bloque2 li a{
				width:80%;
				display:block;
				padding:8% 10% 0 10%;
				margin-top:30%;
				line-height:1.4em;
				background:rgba(134, 188, 36, 0.15);
				transition: 0.5s;
				color:#86bc24;
				}
			
			.bloque2 li a:hover{
				background:rgba(134, 188, 36, 0.5);
				padding:38% 10% 0 10%;
				margin-top:0;
				transition: 0.5s;
				}
				
				.impresas {
					background:url(../img/impresas.jpg) no-repeat top right;
					background-size: cover;
					}
					
					.impresas2 {
						width:114%;
						padding:3% 0 8% 12%;
						margin-left:-12%;
						color:#86bc24;
						background:#FFF;
						float:left;
						}
						
		.bloque3 li {
			width:100%;
			text-align:left;
			float:left;
			border-bottom:thin solid #66c1be;
			margin-bottom:1px;
			overflow:hidden;
			}
			
			.bloque3 li a{
				width:80%;
				display:block;
				padding:8% 10% 0 10%;
				margin-top:30%;
				line-height:1.4em;
				background:rgba(102, 193, 190, 0.15);
				transition: 0.5s;
				color:#66c1be;
				}
			
			.bloque3 li a:hover{
				background:rgba(102, 193, 190, 0.5);
				padding:38% 10% 0 10%;
				margin-top:0;
				transition: 0.5s;
				}
				
				.acrilicas {
					background:url(../img/acrilicas.jpg) no-repeat top right;
					background-size: cover;
					}
					
					.acrilicas2 {
						width:114%;
						padding:3% 0 8% 12%;
						margin-left:-12%;
						color:#66c1be;
						background:#FFF;
						float:left;
						}
						
						
		.bloque4 li {
			width:100%;
			text-align:left;
			float:left;
			border-bottom:thin solid #604696;
			margin-bottom:1px;
			overflow:hidden;
			}
			
			.bloque4 li a{
				width:80%;
				display:block;
				padding:8% 10% 0 10%;
				margin-top:30%;
				line-height:1.4em;
				background:rgba(96, 70, 150, 0.15);
				transition: 0.5s;
				color:#604696;
				}
			
			.bloque4 li a:hover{
				background:rgba(96, 70, 150, 0.5);
				padding:38% 10% 0 10%;
				margin-top:0;
				transition: 0.5s;
				}
				
				.masking {
					background:url(../img/masking.jpg) no-repeat top right;
					background-size: cover;
					}
					
					.masking2 {
						width:114%;
						padding:3% 0 8% 12%;
						margin-left:-12%;
						color:#604696;
						background:#FFF;
						float:left;
						}
		
		
		.bloque5 li {
			width:100%;
			text-align:left;
			float:left;
			border-bottom:thin solid #efd500;
			margin-bottom:1px;
			overflow:hidden;
			}
			
			.bloque5 li a{
				width:80%;
				display:block;
				padding:8% 10% 0 10%;
				margin-top:30%;
				line-height:1.4em;
				background:rgba(239, 213, 0, 0.15);
				transition: 0.5s;
				color:#efd500;
				}
			
			.bloque5 li a:hover{
				background:rgba(239, 213, 0, 0.5);
				padding:38% 10% 0 10%;
				margin-top:0;
				transition: 0.5s;
				}
				
				.film {
					background:url(../img/film.jpg) no-repeat top right;
					background-size: cover;
					}
					
					.film2 {
						width:114%;
						padding:3% 0 8% 12%;
						margin-left:-12%;
						color:#efd500;
						background:#FFF;
						float:left;
						}			
			
		
		.bloque6 li {
			width:50%;
			text-align:left;
			float:left;
			border-bottom:thin solid #b7274c;
			margin-bottom:1px;
			overflow:hidden;
			}
			
			.bloque6 li a{
				width:80%;
				display:block;
				padding:10% 10% 0 10%;
				margin-top:40%;
				line-height:0.95em;
				background:rgba(183, 39, 76, 0.15);
				transition: 0.5s;
				color:#b7274c;
				}
			
			.bloque6 li a:hover{
				background:rgba(183, 39, 76, 0.5);
				padding:50% 10% 0 10%;
				margin-top:0;
				transition: 0.5s;
				}
				
				.otros {
					background:url(../img/otros.jpg) no-repeat top right;
					background-size: cover;
					}
					
					.otros2 {
						width:114%;
						padding:4% 0 10% 12%;
						margin-left:-12%;
						color:#b7274c;
						background:#FFF;
						float:left;
						}
			
			
	.col1a {
		width:80%;
		padding:10%;
		position:absolute;
		right:0;
		top:35%;
		text-align:left;
		z-index:900;
		background:rgba(255,255,255,0.5)
		}
	
	.banda{
		width:80%;
		padding:10%;
		position:absolute;
		right:0;
		bottom:0;
		text-align:left;
		z-index:10;
		background:rgba(239,124,0,0.85);
		}
		
		.color1, .color2, .color3, .color4, .color5, .color6 {
			padding:0 10% 0 10%;
			height:5.5em;
			}
			
		.color1 {
			background:rgba(222,0,100,0.15);
			}
			
		.color2 {
			background:rgba(134,188,36,0.15);
			}
			
		.color3 {
			background:rgba(102,193,190,0.15);
			}
			
		.color4 {
			background:rgba(96,70,150,0.15);
			}
			
		.color5 {
			background:rgba(239,213,0,0.15);
			}
		
	.linea {
		width:100%;
		position:absolute;
		top:33.5em;
		}
		
		.menos {
			top:31em;
			}
		
		.colorpre {
			border-bottom:thin solid #de0064;
			}
		
		.colorimp {
			border-bottom:thin solid #86bc24;
			}
		
		.coloracr {
			border-bottom:thin solid #66c1be;
			}
		
		.colormas {
			border-bottom:thin solid #604696;
			}
		
		.colorfil {
			border-bottom:thin solid #efd500;
			}
			
	.col1 {
		width:80%;
		float:left;
		text-align:left;
		padding:10%;
		}
		
		.titulos {
			width:100%;
			padding:5% 0 5% 0;
			margin-bottom:5%;
			text-align:left;
			}
			
			.titulos p{
				line-height:1em;
				font-size:1.35em;
				letter-spacing:1px;
				}
				
		.fichatecnica ul {
			width:100;
			float:left;
			}
			
			.fichatecnica li {
				width:90%;
				padding:5%;
				background:#f9fafb;
				margin-bottom:2px;
				float:left;
				text-align:left;
				font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
				font-size:1em;
				letter-spacing:1px;
				}
		
	.col2 {
		width:80%;
		float:left;
		text-align:left;
		padding:20% 10% 5% 10%;
		}
		
	.col3 {
		width:80%;
		float:left;
		text-align:left;
		padding:5% 10% 20% 10%;
		}
		
		.fotos{
			padding:0 10% 5% 10%;
			}
			
		.interna{
			padding:5% 10% 5% 10%;
			}
	
	.col4 {
		width:80%;
		float:left;
		text-align:left;
		padding:20% 10% 20% 10%;
		}
		
		.ficha{
			text-align:left;
			margin-top:30%;
			}
			
		.punteo {
			width:100%;
			float:left;
			padding:10% 0 10% 0;
			}
			
			.punteo li {
				width:100%;
				float:left;
				font-size:1em;
				font-family: 'helveticaneue-medium', Arial, Helvetica, sans-serif;
				padding:5% 0 5% 0;
				}
				
	
	.fin {
		width:100%;
		float:left;
		padding:5% 0 5% 0;
		margin-bottom:5%;
		border-bottom: thin solid #999;
		}
	
	#somos {
		width:100%;
		float:left;
		height:auto;
		background:url(../img/nosotros-C.jpg) no-repeat center fixed;
		background-size:cover;
		padding:10% 0 10% 0;
		}
	
		
	.colcontacto {
		width:100%;
		background:url(../img/contacto.jpg) no-repeat center;
		background-size:cover;
		padding:30% 0 30% 0;
		}
		
		.subrrayado {
			padding-bottom:2%;
			border-bottom: thin solid #b7274c;
			width:100%;
			}
		
		.centro {
			text-align:center;
			}
		
		.separador {
			width:30%;
			height:1px;
			border-bottom:thin solid #ef7c00;
			float:left;
			margin:0 35% 0 35%;
			padding:3% 0 3% 0;
			}
			
			.bord{
				border-color:#b7274c;
				}
 	
	#contacto {
		width:100%;
		float:left;
		height:auto;
		background: #fcf9f9;
		}
		
		.links {
			width:100%;
			float:left;
			}
		
		.links li {
			width:100%;
			height:auto;
			float:left;
			text-align:left;
			display:inline-flex;
			margin-bottom:0.3em;
			}
			
			.datos {
				font-family: 'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
				font-size:1.2em;
				color:#58595b;
				margin-top:0.1em;
				padding-left:0.8em;
				text-align:left;
				width:100%;
				-webkit-transition: 0.4s;
				-moz-transition: 0.4s;
				-o-transition: 0.4s;
				-ms-transition: 0.4s;
				transition: 0.4s
				}
					
				.datos:hover {
					color:#ef7d22;
					-webkit-transition: 0.4s;
					-moz-transition: 0.4s;
					-o-transition: 0.4s;
					-ms-transition: 0.4s;
					transition: 0.4s
					}
				
					
footer {
	width:80%;
	float:left;
	background-color:#231f20;
	padding:10%;
	overflow:auto;
	}
	
	.creditos {
		font-size:0.75em;
		color:#c7c7c7;
		text-align:left;
		width:100%;
		float:left;
		}
		
		.pie{
			width:100%;
			margin-bottom:5%;
			text-align:left;
			float:left;
			}
			
			
			
		/*//////////////// CARROUSEL ///////////////////*/

.carro {
	width:100%;
	float:left;
	overflow:auto;
	}
	
.slick-slide {
    margin: 0px 1px;
}
.slick-slide img {
    width: 100%;
}
.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}
.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}    
    

/*//////////////// CARROUSEL ///////////////////*/


/*//////////////// BOTONERA ///////////////////*/

 /* Add a black background color to the top navigation */  
.topnav {
  overflow: hidden;
  border-top:#ef7c00 thin solid;
  font-family:'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
  letter-spacing:1px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: none;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: 0.3s;
}

/* Add an active class to highlight the current page */
.active {
 
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  background:#ef7c00;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
 
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family:'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
  margin: 0;
  transition: 0.5s;
  }

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0px 8px 14px 0px rgba(0,0,0,0.1);
  z-index: 100;
  transition: 0.5s;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: 0.5s;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #ef7c00 !important;
  color: #fff !important;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
 }

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	background:rgba(255,255,255,0.85);
	color:#ef7c00;
  }
  
  .topnav.responsive a:hover {
   	background:#ef7c00;
	color:#fff;
  }
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
	background:rgba(255,255,255,0.85);
	color:#ef7c00;
  }
} 

		

.cd-top {					/* BACK TO TOP */
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
  z-index:10000;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: .6;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .2;
}
.no-touch .cd-top:hover {
  background-color: #000;
  opacity: 1;
}		





/*----------------- TABLETA ------------------*/

@media screen and (min-width:35em){

html, body {
	font-size:92.5%;
	}
	
.topnav {
  overflow: auto;
  border-top:none;
  font-family:'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
  letter-spacing:1px;
  float:left;
  width:68%;
  margin-top:4%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #ef7c00;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}

.dropdown .dropbtn {
  font-size: 16px;
  color: #ef7c00;
  padding: 10px 14px;
  background-color: inherit;
  font-family:'Helvetica Neue LT Std', Arial, Helvetica, sans-serif;
  margin: 0;
  transition: 0.5s;
  }
  
.dropdown-content {
  width:180px;
  float:left;
 }
 
 .dropdown-content a {
  float: left;
  width:90%;
  padding: 5%;
  }
 
.active {
  background-color: #fff;
  display:block;
  transition: 0.3s;
}

	
	.logo {
		width:27%;
		margin-left:5%;
		float:left;
		}
		
		.logo a{
			width:100%;
			margin-left:0;
			}
			
			.pre {
				background:url(../img/premium-cabezal-T.jpg) no-repeat top center;
				background-size:cover;
				height:20em;
				}
				
			.imp {
				background:url(../img/impresas-cabezal-T.jpg) no-repeat top center;
				background-size:cover;
				height:20em;
				}
				
			.acr {
				background:url(../img/acrilicas-cabezal-T.jpg) no-repeat top center;
				background-size:cover;
				height:20em;
				}
				
			.mas {
				background:url(../img/masking-cabezal-T.jpg) no-repeat top center;
				background-size:cover;
				height:20em;
				}
				
			.fil {
				background:url(../img/film-cabezal-T.jpg) no-repeat top center;
				background-size:cover;
				height:20em;
				}
				
			.productos{
				top:14.4em;
				width:90%;
				padding:0 5% 5% 5%;
				}
				
				.detalle{
					margin-top:0;
					text-align:right;
					}
	
	.callbacks_container3 {
		display:block;
		position:relative;
		padding-top:100px;
		}
		
	.callbacks_container2 {
		display:none;
		}
	
	.col1a {
		width:40%;
		padding:5%;
		left:0;
		top:30%;
		background:0;
		}
	
	.banda {
		width:90%;
		padding:4% 5% 4% 5%;
		}	
		
		.color1, .color2, .color3, .color4, .color5, .color6 {
			padding:0 5% 0 5%;
			height:4.5em;
			}
		
	.linea {
		top:27em;
		}
		
		.menos {
			top:25em;
			}
			
	.col1 {
		width:60%;
		padding:6% 20% 6% 20%;
		}
		
	.col2 {
		width:70%;
		padding:15% 15% 2.5% 15%;
		}
			
	.col3 {
		width:70%;
		padding:2.5% 15% 15% 15%;
		}
		
		.fotos{
			padding:0 15% 0 15%;
			}
		
		.interna{
			padding:5% 15% 5% 15%;
			}
	
	.col4 {
		width:70%;
		padding:15%;
		}
	
		.ficha{
			margin-top:25%;
			padding:5% 15% 5% 15%;
			width:70%;
			}
			
		.punteo {
			padding:5% 0 5% 0;
			}
			
			.punteo li {
				padding:5% 0 5% 0;
				}
	
		.titulos {
			padding:2.5% 0 2.5% 0;
			margin-bottom:2.5%;
			}
				
		.fichatecnica ul {
			width:100;
			float:left;
			}
			
			.fichatecnica li {
				width:95%;
				padding:3%;
				}
	
	.espacio {
		margin:2.5% 0 2.5% 0;
		}
		
	.fin {
		padding:5% 0 2.5% 0;
		margin-bottom:2.5%;
		}
								
	.colcontacto {
		width:100%;
		padding:22.5% 0 22.5% 0;
		}
		
		.separador {
			width:20%;
			margin:0 40% 0 40%;
			padding:2% 0 2% 0;
			}
			
		.subrrayado {
			padding-bottom:2%;
			border-bottom: thin solid #b7274c;
			width:100%;
			}
					
			.bloque1 li a{
				width:90%;
				padding:5% 5% 0 5%;
				margin-top:20%;
				}
			
			.bloque1 li a:hover{
				padding:25% 5% 0 5%;
				}
				
					.premium2 {
						padding:1.25% 0 5% 12%;
						}
				
		.bloque2 li  {
			width:50%;
			}
		
		.bloque3 li  {
			width:50%;
			}
		
		.bloque4 li  {
			width:50%;
			}
		
		.bloque5 li  {
			width:50%;
			}
		
		.bloque6 li {
			width:33.333%;
			}

								
footer {
	width:90%;
	padding:5%;
	}
	
	.creditos {
		width:60%;
		font-size:0.8em;
		text-align:right;
		}
	
	.pie{
		width:40%;
		margin-bottom:0;
		}
		
}



/* PC ------------------  TABLET HORIZONTAL -----------------*/

@media screen and (min-width:60em){
	
html, body {
	font-size:100%;
	}
	
.topnav {
    width:48.5%;
    margin-top:4%;
}

.topnav a {
  padding: 2% 5% 2% 5%;
 }

.dropbtn {
  padding: 10px 20px;
  }
  
 .dropdown-content a {
  width:90%;
  padding: 5%;
  }

	.contenido, .bloques {
		width:1100px;
		margin:0 auto;
		position:relative;
		padding:0;
		overflow:auto;
		}
		
		.exepcion {
			overflow:inherit;
			}
		
		.full {
			width:100%;
			}
		
	.callbacks_container3 {
		display:none;
		}
		
	.callbacks_container {
		display:block;
		}
	
		.logo {
			margin-left:0;
			width:51.5%;
			margin-top:1%;
			}
			
		.logo a{
			background: url(../img/packagingyservicios.png) no-repeat left;
			}
			
			.pre {
				background:url(../img/premium-cabezal-M.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.imp {
				background:url(../img/impresas-cabezal-M.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.acr {
				background:url(../img/acrilicas-cabezal-M.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.mas {
				background:url(../img/masking-cabezal-M.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.fil {
				background:url(../img/film-cabezal-M.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.productos{
				top:14.35em;
				width:100%;
				padding:0;
				}
				
				.detalle{
					margin-top:-1.7em;
					}
		
	.col1a {
		width:25%;
		padding:0;
		left:10%;
		top:9%;
		}
	
	.banda {
		width:80%;
		padding:2% 10% 2% 10%;
		top:20.5%;
		bottom: auto;
		}
		
		.linea {
			top:25em;
			}
		
		.color1, .color2, .color3, .color4, .color5, .color6 {
			padding:0;
			height:5em;
			width:100%;
			top:15em;
			}
	
	.col1 {
		width:50%;
		padding:5% 25% 5% 25%;
		}
		
	.col2 {
		width:45%;
		padding:10% 5% 10% 0;
		}
		
	.col3 {
		width:45%;
		padding:10% 0 10% 5%;
		}
	
	.col4 {
		width:30%;
		padding:8% 0 6% 5%;
		vertical-align:middle;
		}
		
		.fotos{
			width:42.5%;
			float:left;
			padding:5% 0 0 7.5%;
			margin-top:8.5%;
			}
			
		.ultima{
			width:42.5%;
			float:left;
			padding:2.5% 0 0 7.5%;
			}
		
		.interna{
			width:45%;
			float:left;
			padding:2.5% 5% 0 0;
			}
	
		.ficha{
			margin-top:9%;
			padding:5% 5% 5% 0;
			width:45%;
			}
			
		.titulos {
			padding:4% 0 4% 0;
			margin-bottom:4%;
			}
					
			.fichatecnica li {
				width:94%;
				padding:2.5% 3% 2.5% 3% ;
				}
	
	.espacio {
		margin:2% 0 2% 0;
		}
		
	.fin {
		padding:5% 0 2% 0;
		margin-bottom:2%;
		}
		
	#somos {
		background:url(../img/nosotros.jpg) no-repeat center fixed;
		background-size:cover;
		padding:3% 0 3% 0;
		}
		
	.colcontacto {
		width:50%;
		padding:24% 0 22% 0;
		float:left;
		}
					
		.separador {
			width:20%;
			margin:0 40% 0 40%;
			padding:1.5% 0 1.5% 0;
			}
			
			.fila {
				top:0;
				margin-top:16%;
				}
		
		.bloque1 li  {
			width:33.333%;
			}
		
		.bloque2 li  {
			width:33.333%;
			}
		
		.bloque3 li  {
			width:33.333%;
			}
		
		.bloque4 li  {
			width:50%;
			}
		
		.bloque5 li  {
			width:50%;
			}
		
		.bloque6 li {
			width:20%;
			}	
			
			.internos li {
				width:25%;
				}
				
				.bloque1 li a{
					width:80%;
					padding:10% 10% 0 10%;
					margin-top:50%;
					}
				
				.bloque1 li a:hover{
					padding:60% 10% 0 10%;
					}
						
						.premium2 {
							padding:3% 0 10% 12%;
							}
				
				.bloque2 li a{
					width:80%;
					padding:10% 10% 0 10%;
					margin-top:50%;
					}
				
				.bloque2 li a:hover{
					padding:60% 10% 0 10%;
					}
						
						.impresas2 {
							padding:3% 0 10% 12%;
							}
							
				.bloque3 li a{
					width:80%;
					padding:10% 10% 0 10%;
					margin-top:50%;
					}
				
				.bloque3 li a:hover{
					padding:60% 10% 0 10%;
					}
						
						.acrilicas2 {
							padding:3% 0 10% 12%;
							}
							
				.bloque4 li a{
					width:90%;
					padding:5% 5% 0 7%;
					margin-top:20%;
					}
				
				.bloque4 li a:hover{
					padding:25% 5% 0 7%;
					}
					
						.masking2 {
							padding:1.5% 0 5% 12%;
							}
							
				.bloque5 li a{
					width:90%;
					padding:5% 5% 0 7%;
					margin-top:20%;
					}
				
				.bloque5 li a:hover{
					padding:25% 5% 0 7%;
					}
					
						.film2 {
							padding:1.5% 0 5% 12%;
							}
				
				.bloque6 li a{
					margin-top:50%;
					}
				
				.bloque6 li a:hover{
					padding:60% 10% 0 10%;
					}
					
					.internos li a{
						width:80%;
						padding:10% 10% 0 10%;
						margin-top:50%;
						}
					
					.internos li a:hover{
						padding:60% 10% 0 10%;
						}
						
						.interno {
							padding:3% 0 10% 12%;
							}		
							
footer {
	width:100%;
	padding:1.5% 0 1.5% 0;
	}
	
	.creditos {
		font-size:0.7em;
		padding-top:0.5%;
		}
						
	
}



/*----------------- PC GRANDE -----------------*/

@media screen and (min-width:90em){

		
			.pre {
				background:url(../img/premium-cabezal.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.imp {
				background:url(../img/impresas-cabezal.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.acr {
				background:url(../img/acrilicas-cabezal.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.mas {
				background:url(../img/masking-cabezal.jpg) no-repeat top center;
				background-size:cover;
				}
				
			.fil {
				background:url(../img/film-cabezal.jpg) no-repeat top center;
				background-size:cover;
				}
		
			
					
			
}