@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		10;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;	float: left;	margin: 0;	width: 40%;	display: block; text-align:center; padding: 6% 30% 5%;}
#slide {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slide #text { position: absolute; width:50%; margin: 18% 25%; text-align:center; }
#copy {
clear: both; float: left; margin-left: 15%; width: 70%; display: block; text-align: center;
}
#modulo1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	background-image:url(../images/los_potrillos_mexican_food_market_taqueria_groceries_tacos_bistec_asada_pastor_menudo_01.jpg); background-size:cover;
}
#modulo2 {
clear: both; float: left; width:100%; display: block; text-align:center; margin-bottom: 0; background-image:url(../images/los_potrillos_mexican_food_market_taqueria_groceries_tacos_bistec_asada_pastor_menudo_02.jpg); background-size:cover;
}
#modulo3 { clear: none; float: left; margin-left: 0; width: 100%; display: block; text-align:center; background-image:url(../images/los_potrillos_mexican_food_market_taqueria_groceries_tacos_bistec_asada_pastor_menudo_03.jpg); background-size:cover;
}
#modulo4 { clear: both; float: left; margin-left: 0; width: 85%; display: block; background: url(../images/fondo_1.jpg); background-repeat: no-repeat; padding:15% 0 0 15%; background-size: 100% auto; background-position: top;}
#modulo4 #img { margin-top:-4%; z-index:1; width:95%; margin-left:5%;}
#img { clear: both; float: left; margin-left: 0; width: 100%; display: block;}
#modulo5 { clear: both; float: left; margin-left: 0; width: 70%; display: block; padding:3% 15% 15%;}
#modulo5 #text { width:100%; margin-bottom: 12%;}
#titulo { clear: both; float: left; margin-left: 0; width: 100%; display: block; z-index:1000; position:relative;}
#text { clear: both; float: left; margin-top: 8%; width: 70%; display: block;}
#modulo6 {
 clear: both; float: left; margin-left: 0; width: 70%; display: block; background: url(../images/fondo_2.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: top; padding: 10% 15%;}
#modulo6 #titulo { margin: 0; width: 100%; padding:0;}
#modulo6 #text { margin: 8% 0 0; width:100%; }
#footer {
clear: both; float: left; margin-left: 0; width: 100%; display: block; background:#141c1c; padding-bottom: 15%;}
#cint { clear: both; float: left; margin-left: 0; width: 80%; display: block; background:#fdc113; text-align: center; padding:4% 10%; margin-bottom: 0;}
#adress { clear: both; float: left; margin-left: 15%; width: 70%; display: block; text-align: center; margin-bottom:5%; margin-top: 12%;}
#sitemap { clear: both; float: left; margin-left: 15%; width: 70%; display: block; text-align: center;margin-bottom:5%;}
#header2 { clear: both; float: left; margin-left: 0; width: 100%; display: block;}
#icons {
 clear: none; float: left; width: 100%;	display: block; text-align: center; margin-bottom: 5%;}
#colum1, #colum2, #colum3 { clear: none;  float: left; display: block; }
#modulo7 { clear: both;  float: left;  margin-left: 0;  width: 70%;  display: block; padding: 10% 15%;}
#modulo7 #colum1, #modulo7 #colum3, #modulo8 #colum1, #modulo8 #colum3  { width: 100%; margin-bottom: 10%;padding:0;}
#modulo7 #colum2, #modulo8 #colum2 { width: 84%; margin-bottom: 10%; border: 2px solid #dd986d; border-radius: 8%; padding: 10% 8%; text-align:left;}
#modulo7 #titulo { margin-left:0; padding:0; width:100%; margin-bottom:3%;}
#modulo8 { clear: both; float: left; margin-left: 0; width: 70%; display: block; padding: 10% 15%;}
#modulo9 #img3 { display: block; clear: none; float: left;width: 100%;}
#modulo9 #img4 { display: block; clear: none; float: left;width: 100%; margin-top:6%;}
#modulo9 { clear: none; float: left; margin-left: 0%; width: 100%; display: block; margin-top:6%;}
#modulo5 #img2 { clear: both; float: left; margin-left: 0; width: 100%; display: block;}
#modulo5 #colum1 { clear: both; float: left; display: block; width: 100%;}
#modulo5 #colum2 { clear: both; float: left; display: block; width: 100%; margin-top: 16%;}
#form1 { clear: both; float: left; margin: 10% 0 0; width: 80%; display: block; background:#82dfe7; padding:10%;}
#form2 { clear: both; float: left; margin: 10% 0 0; width: 100%; display: block;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 680px) {
.gridContainer {
	width: 100%;
}
#logo {
 clear: both; float: left; margin: 0; width: 15%;	display: block; text-align:center; padding: 3% 0 3% 10%}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slide {
clear: none; float: left; margin-left: 0; width: 100%; display: block;
}
#modulo1 { clear: none;float: left; margin: 0; width:33.333%;}
#modulo2 { clear: none;float: left; margin: 0; width:33.333%;}
#modulo3 {clear: none;float: left; margin-left: 0; width: 33.333%;display: block;}
#footer {
clear: both; float: left; margin-left: 0; width: 100%; display: block; padding-bottom: 13%;
}
#modulo4 { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 10% 0 0 ; background-position: right top; background-size: 80% auto;}
#modulo4 #img {clear: both;float: left; margin-left: 10%;width: 70%;display: block;margin-top: -4%;z-index:1;}
#modulo5 { clear: both; float: left; margin-left: 0; width: 80%; display: block; padding:6% 10% 10%;}
#modulo5 #text { margin: 0 0 10% 0; width: 75%;}
#modulo5 #colum1 { width:70%; margin: 0%; margin-left:15%;}
#modulo5 #colum2 { clear: none; width:70%; margin: 6% 0 0 15%;}
#modulo5 #img { width: 75%; margin-left:25%;}
#titulo {clear: none; float: left;margin-left: 40%;width: 60%;display: block; z-index:1000; position:relative;}
#img { clear: both; float: left; margin-left: 0; width: 100%; display: block;}
#text { clear: both; float: left; margin: 4% 0 0 40%; width: 42%; display: block;}
#modulo6 {
 clear: both; float: left; margin-left: 0; width: 100%; display: block; padding:0;}
#modulo6 #titulo { margin: 7% 0 0 10%; width: 85%; padding:0;}
#modulo6 #text { margin: 5% 0 6% 25%; width:55%;padding:0;}
#cint { clear: both; float: left; margin-left: 0; width: 80%; display: block; padding: 2.5% 10%;}
#adress { clear: both; float: left; margin-left: 10.204%; width: 38.7755%; display: block; margin-bottom:0%; text-align:left; margin-top: 9%;}
#sitemap { clear: none; float: left; margin-left: 12.2448%; width: 28.5714%; display: block;margin-bottom:0%; text-align:left; margin-top: 9%;}
#copy { clear: both; float: left; margin: 5% 0 0 10.204%; width: 38.7755%; display: block; text-align: left;}
#header2 { clear: both; float: left; margin-left: 0; width: 100%; display: block;}
#icons {
 clear: none; float: left; margin: 4% 0 0 35%; width: 30%;	display: block; text-align: right;}
#modulo7 { clear: both;  float: left;  margin-left: 0;  display: block; padding: 10%; width: 80%;}
#modulo7 #colum1 { width: 50%; margin:0;padding:0;}
#modulo7 #colum2 { width: 34%; margin-left:5%; border: 2px solid #dd986d; border-radius: 8%; padding: 5%;}
#modulo7 #colum3 { clear: both; width: 70%; margin: 8% 15% 0;}
#modulo7 #titulo { padding:0; width:90%; margin: 0 0 5%;}
#modulo8 { clear: both;  float: left;  margin-left: 0;  display: block; padding: 10%; width: 80%;}
#modulo8 #colum1 { width: 46%; margin:0;padding:0;}
#modulo8 #colum2 { width: 50%; margin: 6% 0% 0; border: 2px solid #dd986d; border-radius: 8%; padding: 4%;}
#modulo8 #colum3 { width: 50%; margin-left:4%; padding:0;}
#modulo8 #titulo { padding:0; width:100%; margin: 0 0 3%;}
#modulo9 { clear: none; float: left; margin-left: 2%; width: 48.9%; display: block; margin-top:0%;}
#modulo5 #img2 { clear: none; width:49.1%; margin:0; padding:0;}
#modulo9 #img3 { clear: none; width:100%;margin:0;}
#modulo9 #img4 { clear: none; width:100%;margin:4% 0 0 ;}
#form1 { clear: both; float: left; margin: 0; width: 88%; display: block; padding:6%;}
#form2 { clear: both; float: left; margin: 5% 0 0; width: 100%; display: block;}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media screen and (min-width: 769px) { 
#header {
clear: both; float: left; margin: 0; width: 100%; display: block; padding: 30px;
}
#header2 { clear: both;  float: left;  margin-left: 0;  width: 20%;  display: block; padding: 5% 7% 0;}
#logo {
 clear: both; float: left; margin: 0; width: 100%;	display: block; text-align:center; margin-bottom: 10%; padding:0;}
#icons {
 clear: both; float: left; margin: 0; width: 100%;	display: block; text-align:center;}
#slide {
	clear: none;
	float: left;
	margin-left: 0;
	width: 66%;
	display: block;
}
#footer {
clear: both; float: left; margin-left: 0; width: 100%; display: block; padding-bottom:10%;
}
#modulo1 { clear: none;float: left; margin: 0; width:33.333%;}
#modulo2 { clear: none;float: left; margin: 0; width:33.333%;}
#modulo3 {clear: none;float: left; margin-left: 0; width: 33.333%;display: block;}
#modulo4 {clear: both;float: left;margin-left: 0;width: 100%;display: block; background-size: 66.666% auto; padding-top: 9%;}
#text {clear: none;float: left; display: block; width: 24%; margin-left:4%;}
#img {clear: both;float: left; display: block;}
#titulo {clear: none; float: left;margin-left: 54%;width: 40%;display: block; z-index:1000; position:relative;}

#modulo4 #img {clear: both;float: left; margin-left: 7%;width: 58%;display: block;margin-top: -2.3%;z-index:1;}
#modulo5 {clear: both;float: left;padding: 7%;width: 86%;display: block;}
#modulo5 #text { width: 47%; margin: 0 6% 0 0;}
#modulo5 #img { width: 47%; clear: none; margin:0;}
#cint { clear: both; float: left; margin-left: 0; width: 80%; display: block; padding:2% 10%;}
#adress { clear: both; float: left; margin-left: 7%; width: 30%; display: block; margin-top: 6%;}
#sitemap { clear: none; float: left; margin-left: 3%; width: 20%; display: block; margin-top: 6%;}
#copy { clear: none; float: left; margin: 0%; width: 33%; display: block; text-align: right; margin-top: 6%;}
#slide #text { position: absolute; width:24%; margin: 12% 21%; text-align:center; }
#modulo6 { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; background-size: 56%; background-position: left top;}
#modulo6 #text { margin: 0 0 0 61%; width:32%;}
#modulo7 { clear: both;  float: left;  margin-left: 0;  display: block; padding: 4% 7%; width: 86%;}
#modulo7 #colum1 { width: 30%; margin:0;padding:0;}
#modulo7 #colum2 { width: 20%; margin-left:4%; border: 2px solid #dd986d; border-radius: 8%; padding: 4%;}
#modulo7 #colum3 { clear: none; width: 32%; margin:0 0 0 5%;}
#modulo7 #titulo { padding:0; width:100%; margin: 0 0 3%;}
#modulo8 { clear: both; float: left; margin-left: 0; padding: 6% 7%; width: 86%; display: block;}
#modulo8 #colum1 { width: 30%; margin:0;padding:0;}
#modulo8 #colum2 { width: 20%; margin:0 0 0 4%; border: 2px solid #dd986d; border-radius: 8%; padding: 4%;}
#modulo8 #colum3 { width: 32%; margin-left:5%; padding:0;}
#modulo8 #titulo { padding:0; width:100%; margin: 0 0 3%;}
#modulo9 { clear: none; float: left; margin-left: 2%; width: 48.9%; display: block;}
#modulo5 #img2 { clear: none; width:49.1%; margin:0; padding:0;}
#modulo9 #img3 { clear: none; width:100%;margin:0;}
#modulo9 #img4 { clear: none; width:100%;margin:4% 0 0 ;}
#modulo5 #colum1 { width:45%; margin: 0%;}
#modulo5 #colum2 { width:50%; margin: 1.5% 0 0 5%;}
#form1 { clear: both; float: left; margin-left: 0; width: 30%; display: block; padding:5%;}
#form2 { clear: none; float: left; margin: 0 0 0 5%; width: 55%; display: block;}
}