@media screen and (min-width:100px) and (max-width:767px){
	body{ font-size:0.8rem}

	#div_servicios{ width:100%; grid-template-columns: repeat(1, 1fr);}
	#div_sucursales{ width: 100%; grid-template-columns: repeat(1, 1fr);}
	#catalogo, #rows, #div_galerias{ grid-template-columns: repeat(1, 1fr);}

	.flex{ display: block;}
	.flex div{ width: 100% !important}
	#div_lealtad .w20{ width: 100%;}
	#div_lealtad .w80{ width: 100%}

	.categories li{ margin:0 !important;}
 	.categories li a{ font-size: 1rem !important; margin: 0}
	
	#detalle_producto{ width: 100%; display: block;}
	#detalle_producto > div{ width: 100%;}
	#header_2 .w20 img{ width:140px; height: auto;}
	
	.overlay{ padding:0 1rem !important}
	.banner{ height: 300px; background-size: cover;}

	#logo{ height: 30px;}
}
@media screen and (min-width:768px) and (max-width:809px){
	body{ font-size:0.8rem}
	
	#div_servicios{ width:100%; grid-template-columns: repeat(2, 1fr);}
	#div_sucursales{ width: 100%; grid-template-columns: repeat(2, 1fr);}

	#div_productos .w20{ width:30%}
	#div_productos .w80{ width:70%;}
	#catalogo, #rows, #div_galerias{ grid-template-columns: repeat(2, 1fr);}
	
	.overlay{ padding:0 1rem !important}
	.banner{ height: 400px; background-size: cover;}
}

@media screen and (min-width:810px) and (max-width:1000px){
	#rows{grid-template-columns: repeat(3, 1fr);}
}

@media screen and (min-width:1501) and (max-width:2800px){}