@media (min-width: 1600px){
	#img-servicios{
		top: 0px;
		right: 200px;
	}
	#img-productos{
		top: -200px;
		left: 200px;
	}
	#img-contacto{
		top: -100px;
		right: 200px;
	}
}

@media (min-width: 2100px){
	#img-servicios{
		top: 0px;
		right: 550px;
	}
	
	#img-productos{
		top: -200px;
		left: 500px;
	}
	#img-contacto{
		top: -100px;
		right: 450px;
	}
}

@media (max-width: 600px){
	body{
		max-width: 100vw;
		overflow-x: hidden;
	}
	
	.anchoMax{
		max-width: 1700px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 5vw;
		padding-right: 5vw;
	}
	
	/********************
	TEXTOS - ESTILOS
	********************/

	h1{
		font-size: 3.5rem;
		font-weight: 600;
	}

	h2{
		font-size: 3.2rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	h3{
		font-size: 1.8rem;
		font-weight: 600;
	}

	h4{
		font-size: 1.4rem;
		line-height: 1.6rem;
		font-weight: 300;
	}

	h5{
		font-size: 2.8rem;
		font-weight: 500;
		line-height: 3.4rem;
	}

	h6{
		font-size: 1.2rem;
		font-weight: 300;
		transition: all 0.3s ease;
	}

	h6 i{
		font-size: 1rem;
	}

	p{
		font-size: 1.2rem;
		line-height: 2rem;
		font-weight: 300;
	}
	
	/********************
	ANCHOS - ESTILOS
	********************/

	.ancho100{
		width: 100%;
	}

	.ancho75{
		width: 100%;
	}

	.ancho50{
		width: 100%;
	}

	.ancho45{
		width: 100%;
	}

	.ancho40{
		width: 100%;
	}

	.ancho30{
		width: 100%;
	}

	.ancho25{
		width: 100%;
	}
	
	/********************
	BOTONES - ESTILOS
	********************/

	.boton{
		border-radius: 30px;
		border: solid 2px;
	}

	.botonMediano{
		padding: 5px 20px;
		font-size: 1.6rem;
	}

	.botonMediano i{
		font-size: 1.3rem;
		margin-left: 5px;
	}

	.botonGrande{
		padding: 4px 20px;
		font-size: 1.8rem;
	}
	
	/********************
	SEPARADORES - ESTILOS
	********************/

	.separadorHorizontal{
		width: 100%;
		height: 1px;
	}

	.separadorVertical{
		display: none;
	}
	
	/********************
	FORMULARIOS - ESTILOS
	********************/

	.formulario label{
		margin-left: 20px;
		font-size: 1.2rem;
		line-height: 1.6rem;
	}

	.formulario input, .formulario textarea{
		margin: 10px 0 25px 0;
		padding: 8px 20px;
		border-radius: 18px;
		font-size: 1.2rem;
	}

	.formulario button{
		margin-top: 20px;
	}

	.formulario label i{
		margin-left: 5px;
		font-size: 1rem;
		vertical-align: super;
	}
	/********************
	HEADER - ESTILOS
	********************/

	header{
		position: fixed;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#menuHeader{
		align-items: center;
	}

	#menuHeader p{
		font-size: 1.4rem;
		margin-left: 5px;
	}

	#iconoMenu{
		z-index: 999;
		width: 40px;
	}

	#iconoMenu .linea-iconoMenu{
		height: 3px;
		border-radius: 1.5px;
		margin-bottom: 5px;
	}

	#iconoMenu #linea1{
		width: 40px;
	}

	#iconoMenu #linea2{
		width: 30px;
	}

	#iconoMenu #linea3{
		width: 20px;
	}

	#logoHeader{
		width: 40%;
	}

	#whatsAppHeader{
		position: absolute;
	}
	
	#botonWhatsapp{
		position: fixed;
		top: 90vh;
		font-size: 1.4rem;
		font-weight: 500;
	}

	#botonWhatsapp i{
		font-size: 1.5rem;
		margin-right: 2px;
	}
	
	/********************
	MENÚ - ESTILOS
	********************/

	#menu{
		padding: 15vh 0 10vh 0;
		clip-path: inset(0px 100% 0px 0px);
	}

	#contenedorMenu{
		height: 100%;
	}

	#primerBloque{
		width: 100%;
	}

	#listaMenu li{
		margin-bottom: 25px;
	}

	#listaMenu li:last-of-type{
		margin-bottom: 40px;
	}

	#listaMenu li::after{
		top: 0;
		left: 2px;
		width: 2px;
		height: 100%;
	}

	#listaMenu li a{
		font-size: 2rem;
	}

	#contactoMenu{
		text-align: left;
	}

	#contactoMenu li{
		margin-top: 10px;
	}

	#contactoMenu li:hover a{
	}

	#redesMenu li{
		margin-right: 10px;
	}

	#redesMenu li a, #contactoMenu li a{
		font-size: 1.3rem;
	}

	#logoMenu{
		position: fixed;
		top: 4%;
		right: 10%;
		width: 35%;
	}
	
	/********************
	HOME - CABECERA - ESTILOS
	********************/

	#cabeceraHome{
		padding-top: 15vh;
	}

	#cabeceraHome h2{
		margin-bottom: 35px;
	}
	
	/********************
	HOME - SLIDER SERVICIOS - ESTILOS
	********************/

	#sliderServicios{
		margin: 75px 0;
		background: none;
	}

	#img-servicios{
		position: absolute;
		top: 0px;
		right: 10px;
	}

	#bolsaCafe{
		width: 95px;
	}

	#botellaJugo{
		width: 70px;
		box-shadow: 70px 50px 40px rgba(0,0,0,0.1);
	}

	.slider-servicios{
		width: 100%;
		padding: 200px 10vw 100px 5vw;
		background-image: url(../img/bg_serviciosHome.svg);
		background-size: 50%;
		background-position: 0;
	}

	.slider-servicios .flickity-button,  .slider-servicios .flickity-button:hover{
	}

	.slider-servicios .flickity-prev-next-button.next{
		right: 15px;
		top: calc(50% + 80px);
	}

	.slider-servicios .flickity-prev-next-button.previous {
	}

	.slider-servicios button.flickity-prev-next-button.next::before {
	  font-size: 25px;
	}

	.slider-servicios .flickity-prev-next-button.next svg{
	}

	.slider-servicios .flickity-page-dots {
		width: 90%;
		bottom: 30px;
	}

	.slider-servicios .flickity-page-dots .dot {
		width: 12px;
		height: 12px;
	}

	.slider-servicios .flickity-page-dots .dot.is-selected {
	}

	.slider-servicios .tarjeta{
		min-height: 100%;
		width: 85%;
		margin-right: 16%;
		padding: 20px 12px;
	}

	.slider-servicios .tarjeta p{
		margin: 20px 0 25px 0;
	}
	
	/********************
	HOME - PRODUCTOS - ESTILOS
	********************/

	#nuestrosProductos{
		margin-top: 120px;
	}

	#img-productos{
		top: -200px;
		left: 10px;
	}

	#bolsaPapel{
		top: 100px;
		width: 150px;
	}

	#bandejaPostobon{
		top: 200px;
		left: -90px;
		width: 150px;
	}

	#ristraBimbo{
		top: -50px;
		left: 120px;
		width: 130px;
	}

	#tituloProductos{
		width: 100%;
		background: none;
	}

	#tituloProductos div{
		padding: 250px 5vw 175px 0;
		background-size: 80%;
	}
	
	#tituloProductos div h1{
		max-width: 100%;
		padding-left: 20%;
	}

	#productos{
		margin-top: -130px;
	}
	
	#productos .oculto{
		display: none;
	}

	.productoHome{
		width: 48%;
		margin-bottom: 5%;
		padding: 12px;
		background-size: 50px;
	}

	.productoHome img{
		width: 100px;
		height: 100px;
		margin-bottom: 15px;
	}
	
	.productoHome div{
		width: 95%;
	}

	.productoHome div h4{
		width: 100%;
		margin-bottom: 10px;
	}

	.productoHome div i{
		min-width: 100%;
		text-align: right;
	}
	
	/********************
	HOME - LOGOS CLIENTES - ESTILOS
	********************/

	#tituloClientes{
		width: 100%;
		margin-top: 50px;
		background: none;
	}

	#tituloClientes div{
		padding: 260px 0 50px 5vw;
		background-size: 80%;
	}
	
	#tituloClientes div h1{
		width: 70%;
	}

	.slider-clientes{
		width: 100%;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.slider-clientes .flickity-page-dots {
		bottom: -75px;
	}

	.slider-clientes .logoCliente{
		width: 100%;
		min-height: 100%;
	}

	.slider-clientes div img{
		max-width: 220px;
		max-height: 50px;
	}
	
	/********************
	HOME - VALORES EMPRESA - ESTILOS
	********************/

	#valores{
		margin-top: 150px;
		padding-left: 0px;
	}

	#textoValores{
		padding-left: 5vw;
		padding-right: 5vw;
	}

	#textoValores div{
		margin-bottom: 40px;
	}

	#textoValores div h3{
		margin-bottom: 15px;
	}

	#textoValores div h3 i{
		margin-right: 5px;
	}

	#tituloValores{
		padding-right: 0px;
		background: none;
	}

	#tituloValores div{
		padding: 150px 0 150px 420px;
		background-size: 60%;
	}

	#tituloValores div img{
		bottom: 20%;
		left: 5vw;
		width: 150px;
	}
	
	/********************
	HOME - CONTACTO - ESTILOS
	********************/

	#contactoHome{
		margin-top: 75px;
	}

	#img-contacto{
		top: 0px;
		right: 0px;
	}

	#ristraMonster{
		top: 20px;
		left: 50px;
		width: 65px;
	}

	#cuadernos{
		top: 150px;
		left: -15px;
		z-index: 9;
		width: 220px;
	}

	#ristraAguardiente{
		display: none;
	}

	#tituloContacto{
		width: 100%;
		margin-top: 50px;
		background: none;
	}

	#tituloContacto div{
		padding: 400px 0 0px 5vw;
		background-size: 80%;
	}

	#contenidoContacto{
		margin-top: 50px;
	}

	#ubicacionHome{
	}

	#mapa{
		height: 75vh;
		margin-top: 50px;
	}

	#datosMapa{
		bottom: 5px;
		left: 5px;
		padding: 15px;
	}

	#datosMapa ul li a{
		font-size: 1.2rem;
		line-height: 1.6rem;
	}
	
	/********************
	HOME - LLAMAR - ESTILOS
	********************/

	#llamar{
		margin-top: 50px;
		margin-bottom: 75px;
	}

	#llamar form{
		margin-top: 30px;
	}

	#llamar form div{
		margin: 0 50px;
	}
	
	/********************
	FOOTER - PIE DE PAGINA - ESTILOS
	********************/

	footer{
		padding-left: 5vw;
	}

	#contenidoFooter{
		padding-top: 30px;
		padding-bottom: 70px;
		padding-left: 5vw;
		padding-right: 0;
	}

	footer div img{
		width: 60%;
		margin-bottom: 30px;
	}
	
	footer div ul{
		width: 100%;
		margin-bottom: 20px;
	}

	footer div ul li a{
		font-size: 1.2rem;
		line-height: 2.2rem;
	}

	#copyFooter{
		margin-top: 15px;
	}

	#copyFooter p{
		font-size: 1.2rem;
	}
	
	/********************
	COTIZACIÓN
	********************/

	#tituloCotizacion{
		padding-top: 16vh;
		padding-bottom: 0px;
		background-size: 101%;
	}
	
	#tituloCotizacion h2{
		position: relative;
		top: 60px;
	}

	#tituloCotizacion img{
		top: 60%;
		left: 10%;
		width: 15vw;
	}

	/********************
	COTIZACIÓN - FORMULARIO
	********************/

	#formularioCotizacion{
		margin-top: -1px;
		padding-top: 100px;
		padding-bottom: 50px;
	}

	/********************
	COTIZACIÓN - TOOLTIP AYUDA
	********************/

	.tooltip {
	}

	.tooltip .tooltiptext {
		font-size: 9px;
		line-height: 1.1rem;
		width: 200px;
		padding: 5px 5px;
		bottom: 175%;
		left: 0%;
		margin-left: -100px;
	}

	.tooltip .tooltiptext::after {
	}

	.tooltip:hover .tooltiptext {
	}
	
	/********************
	PÁGINA DE PRODUCTO - TÍTULO E IMAGEN PRINCIPAL
	********************/

	#paginaProducto{
		padding-top: 15vh;
		padding-bottom: 50px;
	}

	#contenidoProducto a{
		margin-bottom: 25px;
	}

	#contenidoProducto a h6:hover{
	}

	#contenidoProducto p{
		margin-top: 30px;
	}

	#imagenProducto{
		margin-top: 30px;
	}

	#imagenProducto .puntos{
		top: 20px;
		left: 0;
		width: 50%;
	}

	#imagenProducto .img{
		left: 95%;
		transform: translate(-100%, 0);
		width: 50%;
		max-height: 300px;
	}

	/********************
	PÁGINA DE PRODUCTO - GALERÍA DE IMÁGENES
	********************/

	#galeriaProducto{
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.slider-producto .carrousel-cell{
		width: 50%;
	}

	.slider-producto .flickity-button,  .slider-producto .flickity-button:hover{
	}

	.slider-producto button.flickity-prev-next-button.previous::before, .slider-producto button.flickity-prev-next-button.next::before{
		font-size: 25px;
	}

	.slider-producto button.flickity-prev-next-button.previous::before {
	}

	.slider-producto button.flickity-prev-next-button.next::before {
	}

	.slider-producto .flickity-prev-next-button.previous svg, .slider-producto .flickity-prev-next-button.next svg{
	}

	.slider-producto .flickity-page-dots {
		bottom: -50px;
	}

	.slider-producto .flickity-page-dots .dot {
		width: 10px;
		height: 10px;
	}

	.slider-producto .flickity-page-dots .dot.is-selected {
	}

	.slider-producto .carrousel-cell a{
	}

	.slider-producto .carrousel-cell a img{
	}

	/********************
	PÁGINA DE PRODUCTO - COTIZACIÓN
	********************/

	#tituloCotiProducto{
		padding-top: 75px;
	}
	
	#tituloCotiProducto h2{
		width: 100%;
		padding-left: 30%;
		box-sizing: border-box;
	}

	#tituloCotiProducto img{
		top: 75px;
		left: 5vw;
		width: 15vw;
		max-width: 150px;
	}

	#cotizacionProducto form{
		margin-top: 50px;
	}
	
}

@media(max-width: 600px) and (min-width: 380px){
	#nuestrosProductos{
		margin-top: 150px;
	}

	#img-productos{
		top: -230px;
		left: 0px;
	}

	#bolsaPapel{
		top: 160px;
		left: 50px;
		width: 190px;
	}

	#bandejaPostobon{
		top: 230px;
		left: -40px;
		width: 200px;
	}

	#ristraBimbo{
		top: -140px;
		left: 200px;
		width: 170px;
	}
	
	#tituloClientes div{
		padding: 300px 0 100px 5vw;
		background-size: 80%;
	}
	
	#contactoHome{
		margin-top: 75px;
	}

	#img-contacto{
		top: 0px;
		right: 0px;
	}

	#ristraMonster{
		top: 5px;
		left: 10px;
		width: 75px;
	}

	#cuadernos{
		top: 130px;
		left: -50px;
		z-index: 9;
		width: 220px;
	}

	#ristraAguardiente{
		display: none;
	}
	
	#tituloContacto div{
		padding: 500px 0 10px 5vw;
		background-size: 80%;
	}
	
	#datosMapa{
		bottom: 10px;
		left: 10px;
		padding: 15px;
	}
}