@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-color: #eeeae0;}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
#logo {
	clear: both;
	float: left;
	width: 50%;
	text-align: center;
	margin: 7% 25% 6%;
	display: block;
}
#menu {
	clear: both;
	float: left;
	width: 100%;
	text-align: center;
	margin: 0;
	display: block;
    border-top: 1px solid #371b0a;
}
#slide {
	clear: both;
	float: left;
	display: block;
    width: 100%;
}
#slide-tx {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-size: 14pt;
    line-height:19pt;
    color: #fff;
    width: 80%;
    font-weight: 500;
    text-align: center;
    margin: 28% 10% 0;
}
section {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
.head {
    background: #f99d1e;
}
.section {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
.drink {
    clear: both;
	float: left;
	width: 76%;
	display: block;
    padding: 6% 12% 12%;
}
.cont {
    clear: both;
	float: left;
	width: 76%;
	display: block;
    padding: 10% 12% 15%;
    text-align: center;
}
#sec-1 {
   clear: both;
	float: left;
	width: 70%;
	display: block; 
    background: url("../img/mazatlan-mexican-bar-and-grill-tacos-fajitas-enchiladas-03.jpg");
    padding: 10% 15%;
    background-size: 100% auto;
    background-position: left center;
    text-align: center;
}
#sec-1 img {
    width: auto;
    height: 100px;
}
#col1 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#col2 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#col3 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#modulo1 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    background: url("../img/mazatlan-mexican-bar-and-grill-tacos-fajitas-enchiladas-02.jpg");
    padding-bottom: 70%;
    background-size: 100% auto;
    background-position: center 300%;
    margin: 4% 0 0;
}
#modulo2 {
    clear: both;
	float: left;
	width: 50%;
    padding: 16% 25%;
	display: block;
    background-color: #d22329;
}
#modulo3 {
    clear: both;
	float: left;
	width: 64%;
    padding: 16% 18%;
	display: block;
    background: #f99d1e;
}
#modulo4 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    background: url("../img/mazatlan-mexican-bar-and-grill-tacos-fajitas-enchiladas-01.jpg");
    padding-bottom: 70%;
    background-size: 100% auto;
    background-position: center;
}
#title {
    clear: both;
	float: left;
	width: 86%;
	display: block;
    border-bottom: 1.4px solid #1b1b1b;
    padding: 0 7% 6%;
    margin: 0 0 6%;
    text-align: center;
}
#title img {
    width: 100%;
    margin-bottom: 4%;
}
#group #title {
    clear: both;
	float: left;
    display: block;
}
#group {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#menu1, #menu2, #menu3, #menu4 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
 #menu5 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin-top: 8%;
}
#menu3.third {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin-top: 10%;
}
#menu5.dess {
    padding: 10% 0;
    border-radius: 15px;
}
#inside {
    clear: both;
	float: left;
	display: block;
    width: 100%;
}
.dess {
    background: #d22329;
}
.dess #inside {
    width: 70%;
    margin: 0 15%;    
}
footer {
	clear: both;
	float: left;
	display: block;
    background: #371b0a;
    width: 80%;
    padding: 15% 10% 6%;
}
footer img {
    display: block;
    width: 50%;
    margin: 0 25% 3%;
}
footer #col1 { width: 100%; clear: none; text-align: center; margin-bottom: 4%;}
footer #col2 { width: 100%; clear: none; text-align: center; background: none;margin-bottom: 4%;}
footer #col3 { width: 100%; clear: none; text-align: center;}
#copy {
    clear: both;
	float: left;
	display: block;
    background: #d22329;
    width: 80%;
    padding: 2.5% 10%;
    text-align: center;
    color: #fff;
}

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

@media only screen and (min-width: 581px) {

.gridContainer {
	width: 100%;
}
#logo {
	clear: both;
	float: left;
	width: 40%;
	text-align:center;
	margin: 4.5% 30% 3%;
	display: block;
}
#menu {
     padding: 2% 0;   
}
#slide-tx {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-size: 16pt;
    line-height: 19pt;
    color: #fff;
    width: 50%;
    margin: 28% 25% 0;
}
section {
    margin-bottom: 2%;
    width: 100%;
}
.section, .drink {
    clear: both;
	float: left;
	width: 80%;
	display: block;
    padding: 2% 10%;
}
.cont {
    clear: both;
	float: left;
	width: 80%;
	display: block;
    padding: 8% 10%;
}
#sec-1 {
	width: 64%;
    padding: 7% 0 8% 10%;
    border-right: 14px solid #eeeae0;
    text-align: left;
}
#col1 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#col2 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin-top: 2%;
    background: url("../img/mazatlan-mexican-bar-and-grill-tacos-fajitas-enchiladas-01.jpg");
    background-position: right center;
    background-size: 50% auto;
}
#modulo1 {
    margin-top: 2%;
    background-size: 50% auto;
    background-position: left center;
    padding: 0;
}
#modulo2 {
    width: 28%;
    margin-left: 50%;
    padding: 13% 11%;
}
#modulo3 {
    width: 34%;
    padding: 13% 8%;
}
#modulo4 {
    background-position: none;
    padding-bottom: 0;
}
#title {
    clear: both;
	float: left;
	width: 90%;
	display: block;
    margin: 3% 0 5%;
    padding: 0 5% 4%;
}
.third #title { text-align: center; margin-bottom: 7%;}
#title img {
    width: 48%;
    margin-bottom: 2%;
}
.third #title img {
    clear: both;
	float: left;
	width: 67%;
    margin: 0 16.5% 4%;
}
#menu1, #menu2, #menu3 {
    clear: both;
	float: left;
	width: 70%;
	display: block;
    padding: 0 15%;
}
#menu3.third {
    clear: both;
	float: left;
	width: 70%;
	display: block;
    margin-top: 5%;
    padding: 0 15%;
}
#inside {
    width: 70%;
    margin: 0 15%;
}
#menu5.dess {
    padding: 5% 0 9%;
}
footer {
    width: 80%;
    padding: 10% 10% 14%;
}
footer img {
    display: block;
    width: 80%;
    margin: 0 10% 12% 0;
}
footer #col1 { width: 25%; clear: both; text-align: left; margin: 0;}
footer #col2 { width: 38%; clear: none; margin: 0 0 0 10%; background: none; text-align: left;}
footer #col3 { width: 17%; clear: none; margin: 0 0 0 10%; text-align: left;}
#copy {
    width: 90%;
    padding: 1.5% 5%;
}
}

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

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 100%;
	max-width: 1920px;
	margin: auto;
}
#logo {
	clear: both;
	float: left;
	width: 26%;
	text-align:center;
	margin: 4% 37% 3%;
	display: block;
}
#menu {
    width: 70%;
    padding: 1.5% 15%;
}
#slide-tx {
    font-size: 2vw;
    line-height: 2.3vw;
    font-weight: 200;
    width: 50%;
    margin: 50% 0 0 5%;
    text-align: left;
}
section {
    margin-bottom: 2%;
}
.cont {
    clear: both;
	float: left;
	width: 80%;
	display: block;
    padding: 5% 10%;
}
#sec-1 {
	width: 64%;
    padding: 7% 0 8% 10%;
    
}
#sec-1 img {
    width: auto;
    height: 100px;
}
#col1 {
    clear: both;
	float: left;
	width: 74%;
	display: block;
}
#col2 {
    clear: none;
	float: left;
	width: 24%;
	display: block;
    margin-left: 2%;
    margin-top: 0;
    background: none;
}
#modulo3 {
    width: 100%;
    padding: 38.1% 0 94.1%;
    margin-bottom: 7%;
}
#modulo4 {
    width: 100%;
    padding: 96.65% 0;
    background: url("../img/mazatlan-mexican-bar-and-grill-tacos-fajitas-enchiladas-01.jpg");
    background-size: auto 100%;
    background-position: center;
}
#modulo3 img {
    position: absolute;
    margin-left: -12%;
    width: 30%;
    z-index: 100000;
}
#title {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin: 1% 0 4%;
    padding: 0 0 3%;
}
#group #title { margin: 2% 0 6%;}
.third #title { margin: 2% 0 12%;}
#title img {
    width: 34%;
    margin: 1% 0;
}
#group #title img {
    clear: both;
	float: left;
	width: 50%;
	display: block;
    margin: 0 25% 3%;
}
.third #title img {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin: 3% 0 8%;
}
#group {
    clear: both;
	float: left;
	width: 63.5%;
	display: block;
    margin: 0 5% 0 0;
    padding: 0;
}
#group #menu1 {
    clear: both;
	float: left;
	width: 45%;
	display: block;
    margin: 0 10% 0 0;
    padding: 0;
}
#group #menu2 {
    clear: none;
	float: left;
	width: 45%;
	display: block;
    margin: 0;
    padding: 0;
}
#menu1 {
    clear: both;
	float: left;
	width: 30%;
	display: block;
    margin: 0 5% 0 0;
    padding: 0;
}
#menu2 {
    clear: none;
	float: left;
	width: 30%;
	display: block;
    margin: 0 5% 0 0;
    padding: 0;
}
#menu3 {
    clear: none;
	float: left;
	width: 30%;
	display: block;
    padding: 0;
}
#menu4 {
    clear: both;
	float: left;
	width: 47%;
	display: block;
    margin-right: 6%;
    padding: 0;
}
#menu5 {
    clear: none;
	float: left;
	width: 47%;
	display: block;
    padding: 0;
    margin-top: 0;
}
#menu4 #title img, #menu5 #title img {
	width: 66%;
	display: block;
    margin:  2% 17% 4%;
}
#menu4 #title, #menu5 #title {
    margin-bottom: 7%;        
}
#menu5.dess {
    width: 47%;
    padding: 5% 0 7%;
}
#inside {
    width: 60%;
    margin: 0 20%;
}
#menu3.third {
    clear: none;
	float: left;
	width: 31.5%;
	display: block;
    padding: 0;
    margin: 0;
}
footer { padding: 7% 10% 9%;}
footer #col1 { width: 25%; clear: both;}
footer #col2 { width: 38%; clear: none; margin-left: 10%;}
footer #col3 { width: 19%; clear: none; margin-left: 8%;}  
footer img {
    width: 66%;
    margin-bottom: 8%;
}
#copy {
    width: 90%;
    padding: 1% 5%;
}
}