@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:		8;
	dw-num-cols-desktop:	12;
	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. */
body {
    background: url("../img/background2.jpg");
    background-size: 100% auto;
    background-position: center;
}
.line { height: 2px; background: #195498; width: 50%; margin: 6% 0;}
#space { width: 100%; display: block; clear: both; float: left; padding: 5% 0;}
.icon1 { max-width: 50px; margin-bottom: 10%; width: 10%;}
.icon2 { max-width: 50px; margin-top: 10%; width: 10%;}
#title .icon1 { max-width: 35px; width: 5%; vertical-align: middle; margin-top: 8%;}

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
header {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    background: url("../img/background.jpg");
    background-size: 100% auto;
}
#logo {
	clear: both;
	float: left;
	width: 40%;
	text-align:center;
	margin: 8% 30%;
	display: block;
}
#menu {
    clear: both;
	float: left;
	width: 100%;
	text-align:center;
	margin: 0;
	display: block;
    background: #e4ca39;
}
#redes {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    text-align: center;
    margin: 0;
    background: #e31383;
    padding: 3% 0;
}
#slide {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
#slide2 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
#modulos {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#modulo1 {
    clear: both;
	float: left;
	width: 80%;
	text-align:center;
	margin: 0;
	display: block;
    padding: 20% 10%;
    background: #ed5a34;
}
#modulo2 {
    clear: both;
	float: left;
	width: 80%;
	text-align:center;
	margin: 0;
	display: block;
    padding: 20% 10%;
    background: #4aba93;
}
#modulo3 {
    clear: both;
	float: left;
	width: 85%;
	display: block;
}
#title {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    padding: 14% 0 7%;
    text-align: center;
}
#men-title {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin-bottom: 8%;
}
section {
	clear: both;
	float: left;
    padding: 12% 10% 55%;
	width: 80%;
	display: block;
    background: url("../img/tacos-puebla-norristown-chicken-enchiladas-tacos-arabes-tortas-cemitas-01.png");
    background-size: 80% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
}
section.sec-menu {
    background: none;
    clear: both;
	float: left;
	width: 70%;
    padding: 0 15% 14%;
    display: block;
}
section.sec-contact {
    background: none;
    clear: both;
	float: left;
	width: 70%;
    padding: 0 15% 15%;
    display: block;
}
section.sec-contact #modulo3 {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 10%;
}
section.sec-contact #modulo4 {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    padding: 0;
}
#gallery {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    margin-top: -2.5%;
}
#img1 {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    margin-bottom: 12%;
}
#img2 {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    margin-bottom: 12%;
}
#img3 {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    margin-bottom: 12%;
}
.high {
    display: block;
    float: left;
    clear: none;
    width: 80%;
    padding: 15% 0%;
    text-align: center;
    border-top: 2px solid #e31383;
    border-bottom: 2px solid #e31383;
}
.high2 {
    display: block;
    float: left;
    clear: none;
    width: 80%;
    padding: 12% 0%;
    text-align: center;
    border-top: 2px solid #1e6fb4;
    border-bottom: 2px solid #1e6fb4;
}
.photo {
    padding: 50% 0;
    background: url("../img/tacos-puebla-norristown-chicken-enchiladas-tacos-arabes-tortas-cemitas-img-10.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50px;
}
.photo2 {
    padding: 50% 0;
    background: url("../img/tacos-puebla-norristown-chicken-enchiladas-tacos-arabes-tortas-cemitas-img-09.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50px;
}
.photo3 {
    padding: 50% 0;
    background: url("../img/tacos-puebla-norristown-chicken-enchiladas-tacos-arabes-tortas-cemitas-img-11.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50px;
}
.photo4 {
    padding: 50% 0;
    background: url("../img/tacos-puebla-norristown-chicken-enchiladas-tacos-arabes-tortas-cemitas-img-12.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 50px;
}
#col1, #col2, #col3, #col4  {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    margin-bottom: 12%;
}
footer {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    padding: 15% 15% 25%;
    text-align: center;
    background: url("../img/background4.jpg");
    background-size: 100% auto;
    background-position: top center;
}
#foot1 {
    clear: both;
	float: left;
    display: block;
    width: 30%;
    margin: 0 35% 6%;
}
#foot2 {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    margin-bottom: 6%;
}
#map {
    clear: both;
	float: left;
    display: block;
    width: 100%;
}
#lightgallery {
 -moz-column-width: 180px;
 -webkit-column-width: 180px;
 -moz-column-gap: 0;
 -webkit-column-gap: 0; 
}
.demo-gallery > ul > li {
    padding: 0px;
    margin-top: 0px;
}
.col-xs-6 {
    width: 50%;
}

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

@media only screen and (min-width: 581px) {
.line { height: 2px; width: 30%; margin: 6% 0;}
#space { padding: 5% 0;}
.gridContainer {
	width: 100%;
}
header {
    padding: 3% 5%;
    width: 90%;   
}
#logo {
	width: 20%;
	text-align:center;
	margin: 0 40%;
}
#title {
    padding: 6% 0 4%;
}
#menu {
    clear: none;
    width: 100%;
    margin: 3% 0 0;
    background: none;
}
#redes {
    position: absolute;
    width: 20%;
    margin: 0 0 0 70%;
    text-align: right;
    background: none;
    padding: 0;
}
#modulo1, #modulo2 {
    clear: none;
	width: 30%;
    padding: 15% 10%;
}
#modulo3 {
	width: 65%;
}
section {
    padding: 14% 10% 26%;
    width: 80%;
    background-size: 64% auto;
    background-position: right bottom;
}
section.sec-menu {
	width: 80%;
    padding: 0% 10% 6%;
}
section.sec-contact {
	width: 80%;
    padding: 0% 10% 10%;
}
section.sec-contact #modulo3 {
    width: 45%;
    margin-right: 10%;
}
section.sec-contact #modulo4 {
    width: 45%;
    clear: none;
    margin: 0;
}
#men-title {
    margin-bottom: 3%;
}
#gallery {
    margin-top: -2.5%;
}
#img1 {
    clear: both;
	width: 45%;
    margin: 0 10% 10% 0;
}
#img2 {
	width: 45%;
    margin: 0 0 10% 0;
    clear: none;
}
#img3 {
	width: 45%;
    margin: 0 0 10% 0;
    clear: none;
}
.high {
	width: 35%;
    clear: none;
    padding: 15% 0%;
    margin: 0;
}
#img1.high2 {
	width: 45%;
    clear: both;
    padding: 9% 0%;
    margin: 0 10% 10% 0;
}
#img2.high2 {
	width: 45%;
    clear: none;
    padding: 9% 0%;
    margin: 0 10% 10% 0;
}
#img3.photo, #img1.photo2, #img3.photo3, #img1.photo4 { width: 100%;}
.photo, .photo2, .photo3, .photo4 {
	width: 100%;
    padding: 20% 0;
}
#col1, #col3 {
	width: 45%;
    margin: 0 10% 10% 0;
}
#col2, #col4 {
	width: 45%;
    clear: none;
    margin: 0 0 10% 0;
}
#foot1 {
	width: 11%;
    margin: 0 6% 0 0;
}
#foot2 {
	width: 50%;
    clear: none;
    margin: 0 6% 0 0;
}
#map {
	width: 27%;
    clear: none;
}
footer {
    width: 80%;
    padding: 8% 10% 15%;
    text-align: left;
    background: url("../img/background3.jpg");
    background-size: 100% auto;
    background-position: top center;
}
#lightgallery {
 -moz-column-width: 200px;
 -webkit-column-width: 200px;
 -moz-column-gap: 0;
 -webkit-column-gap: 0; 
}
.demo-gallery > ul > li {
    padding: 0;
    margin-top: 0;
}
}

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

@media only screen and (min-width: 800px) {
.line { height: 2px; background: #195498; width: 50%; margin: 12% 0;}
#space { padding: 3% 0;}
.gridContainer {
	width: 100%;
	max-width: 1920px;
	margin: auto;
}
header {
    padding: 1.5% 3% 1.5% 5%;
    width: 92%;   
}
#logo {
	width: 13%;
	margin: 0;
}
#logo img {
	max-width: 140px;
}
#menu {
    clear: none;
    width: 65%;
    margin: 0.7% 3% 0;
    vertical-align: middle;
}
#redes {
    position: relative;
    clear: none;
    width: 15%;
    margin: 0;
}
#slide {
	width: 100%;
    background: #4aba93;
}
#slide2 {
	width: 75%;
}
#men-title {
    margin-bottom: 2%;
}
section {
    padding: 13% 10% 15%;
    width: 80%;
    background-size: 45% auto;
}
section.sec-menu {
	width: 80%;
    padding: 2% 10% 5%;
}
section.sec-contact {
	width: 80%;
    padding: 2% 10% 8%;
}
#modulos {
    clear: none;
	width: 25%;
}
#modulo1, #modulo2 {
    width: 80%;
    padding: 31.8% 10%;
}
#modulo3 {
	width: 70%;
}
#gallery {
    margin-top: -1.8%;
}
#foot1 {
	width: 11%;
    margin-right: 6%;
}
#foot2 {
	width: 50%;
    clear: none;
    margin-right: 6%;
}
#map {
	width: 27%;
    clear: none;
}
#title {
    padding: 5% 0 0;
}
#img1 {
	width: 30%;
    margin-right: 5%;
    margin: 0 5% 8% 0;
}
#img2 {
	width: 30%;
    clear: none;
    margin: 0 5% 8% 0;
}
.high {
	width: 19.5%;
    clear: none;
    padding: 9% 0%;
    margin: 0 5% 8% 0;
}
#img1.high2 {
	width: 29.5%;
    padding: 4% 0%;
    margin: 0 5% 8% 0;
}
#img2.high2 {
	width: 29.5%;
    clear: none;
    padding: 4% 0%;
    margin: 0 5% 8% 0;
}
#img3 {
	width: 29.5%;
    clear: none;
    margin: 0 0 8% 0;
}
#img3.photo, #img1.photo2, #img3.photo3, #img1.photo4 {
	width: 29.5%;
    padding: 25% 0;
}
#col1 {
	width: 20%;
    margin-right: 6.66%;
    margin-bottom: 8%;
}
#col2, #col3 {
	width: 20%;
    clear: none;
    margin-right: 6.66%;
    margin-bottom: 8%;
}
#col4  {
	width: 20%;
    clear: none;
    margin-bottom: 8%;
}
section.sec-contact #modulo3 {
    width: 40%;
    margin-right: 6%;
}
section.sec-contact #modulo4 {
    width: 54%;
    clear: none;
    margin: 0;
}
footer {
    width: 80%;
    padding: 7% 10% 12%;
}
#lightgallery {
 -moz-column-width: 380px;
 -webkit-column-width: 380px;
 -moz-column-gap: 0;
 -webkit-column-gap: 0; 
}
.demo-gallery > ul > li {
    padding: 0;
    margin-top: 0px;
}
}