@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. */
video { width: 100%; border: 0;}
hr { width: 100%; height: 1px; background: #ED0B07; margin: 0 0 1%; border: none; float: left;}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.big { display: none;}
.sma { display: block;}
.icon { width: 50%;}
.icon2 { width: 150px; vertical-align: middle; margin-top: 4%;}

#order-butt {
    clear: both;
	float: left;
	display: block;
    width: auto;
    position: fixed;
    z-index: 1040;
    right: 20px;
    bottom: 20px;
}
#order-butt:hover { cursor: pointer;}
header {
    clear: both;
	float: left;
	width: 100%;
	text-align:center;
    padding: 0 0 7%;
    margin: 0;
    z-index: 10000;
}
#slide {
    clear: both;
	float: left;
	width: 100%;
	text-align:center;
	display: block;
}
#logo {
	clear: both;
	float: left;
	width: 30%;
    margin: -6% 35% 0;
	text-align:center;
	display: block;
}
#title { width: 100%; display: block; float: left; clear: both; margin-bottom: 6%; text-align: center;}
#col2 #title { margin-bottom: 5%;}

section {
	clear: both;
	float: left;
    padding: 0 0 7%;
	width: 100%;
	display: block;
    background: #991908;
    background: linear-gradient(180deg, rgba(153, 25, 8, 1) 0%, rgba(237, 11, 7, 1) 41%);
    text-align:center;
}
#welcome {
    display: block;
    background-image: url("../img/background-2.svg");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: bottom center;
    text-align: center;
    padding: 32% 20% 30%;
    width: 60%;
}
section.reser {
    padding: 0;
	width: 100%;
    background: #fff;
    border: none;
    margin: 0;
}
section.food {
    padding: 3% 0;
	width: 100%;
    text-align: left;
    background: #f9f8ef;
    border: none;
}
section.employ {
    width: 76%;
	padding: 12% 12% 10%;
    text-align: left;
    background: #f9f8ef;
    border: none;
}
section.employ #izq { width: 100%; margin: 0 0 2%; padding:0;}
section.employ #der { width: 100%; padding: 0;}


/*CLUB*/
section.club {
    background: rgb(0,0,0,0.7);
    padding: 20% 5% 15%;
    width: 70%;
    margin: 18% 10%;
    border-radius: 60px;
}
section.club footer { background: none;}
section.club #logo { width: 40%; margin: 0 30% 12%; text-align: center;}


/*SPECIALS*/
section.specials {
    background: #f9f8ef;
    padding: 12% 0 5%;
}
.specials #group1 {
    background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-specials-01.jpg");
    width: 90%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 52%;
    padding-bottom: 80%;
    margin: 0 5%;
}
.specials #group2 {
    width: 90%;
    background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-specials-02.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 52%;
    padding-bottom: 80%;
    margin: 0 5% 0;
}
.specials #group1 #mod { background-color: #ED0B07; width: 70%; padding: 18% 15% 16%;}
.specials #group2 #mod { background-color: #FFB824;width: 70%; padding: 18% 15% 16%;}

#header { padding: 35% 4% 8%; width: 92%;}
#header.secmenu {
    background: #000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 30%, rgba(238, 44, 44, 1) 100%);
}
#header.secspe {
    background: #46984A;
background: linear-gradient(360deg, rgba(70, 152, 74, 1) 24%, rgba(10, 10, 16, 1) 100%);
}
#header.secres {
background: #fcb321;
background: linear-gradient(360deg, rgba(252, 179, 33, 1) 24%, rgba(10, 10, 16, 1) 100%);
}
#izq, #der, #mod3, #mod4 {
    clear: both;
	float: left;
	width: 70%;
    padding: 17% 15% 15%;
	display: block;
    transition: 0.5s ease;
}
#group1 {
    clear: both;
    float: left;
    display: block;
    width: 90%;
    background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-01.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 52%;
    padding-bottom: 80%;
    margin: 0 5%;
}
#group2 {
    clear: both;
    float: left;
    display: block;
    width: 90%;
    background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-02.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 52%;
    padding-bottom: 80%;
    margin: 0 5% 10%;
}
#mod { display: block; clear: both; float: left; width: 84%; padding: 20% 8% 12%; margin: 0;}

#group1 #mod { background-color: #FFB824; transition: 0.6s ease; text-align: center;}
#group1 #mod .right { margin-bottom: 13%; display: block;}

#group2 #mod { background-color: #f8e4ba; transition: 0.6s ease; text-align: center;}
#group2 #mod .right { margin-bottom: 13%; display: block;}

.reser #mod3:hover, .reser #mod4:hover { background: #faf8ee; transition: 0.5s ease;}

#button { background: #2EA032; padding: 5%; width: 90%; font-size: 18pt; transition: 0.5s ease; color: #fff; font-family: 'Zilla Slab', serif; text-align: center; vertical-align: middle; display: block; clear: both; float: left;}
#button:hover { transition: 0.5s ease; cursor: pointer; font-size: 19pt; background: #ED0B07; color: #f9f8ef;}
#button b { font-weight: 600;}

/**MENU**/
#col1, #col2, #col3, #col4 { clear: both;
	float: left;
	display: block;
    width: 100%;}
#title hr { margin-top: 2%;}
.break, .burr, .sala, .enchi, .plate { display: block; margin: 7% 10% 9%; width: 80%; float: left;}
.torta { display: block; margin: 7% 10%; width: 60%; float: left; border: 1px solid #ED0B07; border-radius: 60px; background: #fff; padding: 10%;}
.burr #izq { width: 100%; padding: 0; margin-bottom: 10%;}
.burr #der { background: #fff; padding: 10%; width: 80%; border-radius: 50px; margin: 0;}
.enchi #izq, .enchi #der { width: 100%; padding: 0;}
#der #title { margin-bottom: 8%;}

.high { border: 1.7px solid #ED0B07; padding: 1% 5% 5%; width: 90%; border-radius: 22px; display: block; clear: both; float: left; margin: 6% 0 1%;}
#tacos {
    width: 80%;
    display: block;
    float: left;
    background: #000;
    padding: 15% 10% 12%;
    margin: 10% 0 0;
}

#enchi2 { width: 100%; display: block; float: left; background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-03.jpg"); background-size: cover; background-position: center;}
#faji { width: 100%; display: block; float: left; background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-04.jpg"); background-size: cover; background-position: center;}
#moja { width: 100%; display: block; float: left; background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-05.jpg"); background-size: cover; background-position: center;}
#lunch { width: 100%; display: block; float: left; background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-06.jpg"); background-size: cover; background-position: center;}
#spe { width: 100%; display: block; float: left; background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-07.jpg"); background-size: cover; background-position: center; padding: 5% 0 70%;}
#spe2 { width: 100%; display: block; float: left; background: url("../img/don-esteban-mexican-restaurant-traditional-food-fajitas-burritos-guacamole-chimichangas-margaritas-img-08.jpg"); background-size: cover; background-position: center; padding: 0 0 70%;}
#spe #content, #spe2 #content { width: 90%; margin: 5% 5% 0; padding: 0; background: none;}

#spe #content p, #spe2 #content p { letter-spacing: 0; text-transform: none; font-weight: 500;}

#content { width: 60%; display: block; float: left; background: #fff; padding: 10%; border-radius: 30px; margin:7% 10% 80%; position: relative;}

#info {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    text-align: center;
    padding: 0;
    font-family: 'Parkinsans';
    margin-top: 15%;
    font-size: 8pt;
    line-height: 10pt;
}

footer {
    clear: both;
	float: left;
	display: block;
    padding: 18% 10% 4%;
    width: 80%;
    background: #080844;
    background: linear-gradient(180deg, rgba(8, 8, 68, 1) 24%, rgba(10, 10, 16, 1) 100%);
    text-align: center;
}
footer .icon { max-width: 200px;}
footer #izq, footer #der {
    width: 100%;
    margin-bottom: 6%;
    padding: 0;
}
footer #izq img { max-width: 100px;}
#copy { width: 100%; display: block; float: left;}

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

@media only screen and (min-width: 581px) {
.gridContainer { width: 100%;}
.icon { width: 40%; max-width: 400px;}

/*CLUB*/
section.club #logo { margin: 0 20% 11%; width: 60%;}
section.club footer { margin: 15% 0 0; padding: 0; width: 100%;}

#order-butt {
    top: auto;
    right: 20px;
    bottom: 18px;
}
header {
    padding: 0;
    margin: 0;
    width: 100%;
    background: none;
    position: absolute;
}
#logo {
	width: 16%;
	text-align:center;
	margin: -4% 42% 1.5%;
}
    
/**HOME**/
section { padding: 0 0 4%; width: 100%;}
#welcome { padding: 13% 20%; width: 60%; background-image: url("../img/background.svg");}
#welcome { background-size: 100% auto; background-position: bottom center;}    
   
#group1 { width: 44%; clear: none; padding-bottom: 36%; margin: 0 0 0 6%; background-size: auto 50%; background-position: center bottom;}
#group2 { width: 44%; clear: none; padding: 36% 0 0; margin: 0 6% 6% 0; background-size: auto 50%; background-position: center top;}
    
#group1 #mod { width: 70%; text-align: left; padding: 22% 15% 15%;}
#group1 #mod .right {text-align: right; margin-bottom: 13%; display: block;}

#group2 #mod { width: 70%; text-align: right; padding: 22% 15% 15%;}
#group2 #mod .right {text-align:left; margin-bottom: 13%; display: block;}

section.food { padding: 0 0 5%;}
section.reser { padding: 0; width: 100%;} 
section.employ { width: 70%; padding: 8% 15%;}  
 
#izq, #der {
	width: 26%;
    clear: none;
    padding: 11% 12% 10%;
    background-size: 100% auto;
}
#mod3 {
    width: 46%;
    margin: 0;
    padding: 7% 0;
}
#mod3, #mod4 {
    width: 50%;
    clear: none;
    margin: 0;
    padding: 7% 0;
}
    
#button { padding: 2.5% 5%; width: 90%; font-size: 22pt; }
#button:hover { font-size: 23pt;}

/**MENU**/
#title { margin-bottom: 4%;}
#col1 #title, #col2 #title { margin-bottom: 7%;}
.break, .burr, .enchi, .plate { margin: 6% 15% 8%; width: 70%;}
.sala { margin: 0% 15% 8%; width: 70%;}
.torta { margin: 0 15%; width: 50%; padding: 8% 10% 10%;}
.burr #izq { width: 100%; margin: 0 0 10% 0; padding: 0;}
.burr #der { width: 80%; margin: 0; padding: 10%;}
.enchi #izq { width: 100%; margin: 0; padding: 0;}
.enchi #der { width: 100%; margin: 0; padding:0;}
    
#info { margin-top: 14%;}  
.icon2 { width: 200px; margin-top: 3.5%;}
#header { padding: 17% 5% 0.1%; width: 90%;}
#header.secmenu {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(238, 44, 44, 1) 100%);
}
#content { width: 32%; padding: 4%; margin: 15% 0 15% 10%;}
#enchi2 { background-size: cover; background-position: center left;}
#faji, #moja, #lunch { background-size: 120% auto; background-position: center left;}
#spe, #spe2 { width: 50%; display: block; float: left; padding: 0 0 50%;}
    
/**SPECIALS**/
section.specials { padding-top: 8%; }
.specials #group1 { width: 80%; padding: 0 0 50%; margin: 0 10%; background-size: auto 62%;}
.specials #group2 { width: 80%; padding: 0 0 50%; margin: 0 10%; background-size: auto 55%;}
    
    
footer {
    padding: 9% 15% 3%;
    width: 70%;
}
footer #izq, footer #der {
    width: 100%; margin: 0 0 5%; padding: 0;
}
}

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

@media only screen and (min-width: 900px) {
.gridContainer {
	width: 100%;
	margin: auto;
}

.big { display: block;}
.sma { display: none;}
#order-butt {
    top: auto;
    right: 20px;
    bottom: 18px;
}


/*CLUB*/
section.club {
    padding: 10% 10% 10%;
    width: 50%;
    margin: 10% 15%;
}
section.club #logo { width: 60%; margin: 0 20% 12%;}
section.club #logo img { max-width: 250px;}
section.club footer { margin: 15% 0 0; padding: 0; width: 100%;}
    
header { width: 100%; padding: 0; margin: -4.2% 0 0;}
#header { padding: 40px 5% 30px; width: 90%;}
    
.icon { width: 40%; max-width: 320px;}
.icon2 { width: 180px; margin-top: 25px;}

   
/**HOME**/
#logo {
	width: 15%;
    margin: 2% 0 1.4% 2%;
    text-align: left;
}
#logo img { max-width: 150px;}
section { padding: 0 0 4%; width: 100%;}
#spe, #spe2 { width: 50%; display: block; float: left; padding: 0 0 40%;}
    
/**SPECIALS**/
section.specials { padding: 7% 0 2%;}
.specials #group1 #mod { width: 70%; padding: 18% 15% 16%;}
.specials #group2 #mod { width: 70%; padding: 18% 15% 16%;}
.specials #group1 { width: 42%; padding-bottom: 36%; margin: 0 0 0 8%;}
.specials #group2 { width: 42%; padding: 36% 0 0; margin: 0 8% 6% 0; background-position: center 10%;}
   
/**EMPLOY**/
section.employ #izq { width: 47%; margin-right: 6%; padding: 0;}
section.employ #der { width: 47%; clear: none; padding: 0;}
section.employ { padding: 7% 10% 8%; width: 80%;}
  
#content { width: 25%; padding: 3.2% 3.5%; margin: 12% 0 12% 10%;}
#enchi2, #faji, #moja, #lunch { background-size: cover; background-position: center;}
    
#button { padding: 2% 5%; width: 90%; font-size: 28pt;}
#button:hover { font-size: 29pt;}

/**MENU**/
hr { margin: 0 0 1%;}
#title { margin-bottom: 4%;}
.break, .sala { margin: 4% 10%; width: 80%;}
.enchi, .plate { margin: 4% 10% 5%; width: 80%;}
.torta { margin: 0 10%; width: 70%; padding: 4% 5% 5%;}
.torta #col1, .torta #col2, .sala #col1, .sala #col2 { width: 30%; margin: 0 5% 0 0;}
.torta #col3, .sala #col3 { width: 30%; margin: 0;  clear: none;}
.burr { margin: 3% 10%; width: 80%;}
.burr #izq, .enchi #izq { width: 45%; margin: 0 10% 0 0; padding: 0;}
.burr #der { width: 33%; margin: 0; padding: 6%; clear: none;}
.enchi #der { width: 45%; margin: 0; padding: 0; clear: none;}
#der #title { margin-bottom: 12%;}
    
#col1 #title { margin-bottom: 6%;}
#col1, #col3 { width: 45%; margin-right: 10%;}
#col2, #col4 { width: 45%; clear: none;}
#info { margin-top: 10%;}

/**FOOTER**/
footer { padding: 5% 20% 3%; width: 60%;}
footer #izq, footer #der { width: 100%; margin: 0 0 3%;}
}

@media only screen and (min-width: 1100px) {
    #col1 { width: 22%; margin-right: 4%;}
    #col2, #col3 { width: 22%; clear: none; margin-right: 4%;}
    #col4 { width: 22%; clear: none; margin: 0;}
    #content { margin: 11% 0 11% 10%; padding: 3%;}
    #spe, #spe2 { width: 50%; display: block; float: left; padding: 0 0 36%;}
}