@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. */
hr.line { width: 100%;  height: 1px; background: #000; border: 0; margin: 5% 0 10%; display: block; float: left;}

.big { display: none;}
.sma { display: block;}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
/**PORTAL**/
.portal header {
    width: 100%;
    text-align: center;
    padding: 0; margin: 0;
}
.portal #logo { width: 70%; padding: 10% 15%; margin: 0; background: #fff;}
.portal footer { padding: 6% 5%; width: 90%;}
.portal #copy { margin: 2% 0 0;}
a #loc1, a #loc2 { text-align: center; width: 90%; display: block; padding: 30% 5%; float: left; background-size: 100% auto;
background-position: center; transition: 0.6s ease;}
#loc1:hover, #loc2:hover {  background-size: 110% auto; transition: 0.6s ease;}
#choose { width: 90%; background: #a5301b; color: #fff; padding: 3.5% 5%; display: block; float: left;}

#loc1 { background: url("../img/taco-loco-restaurant-taqueria-tequila-quesadillas-burritos-margaritas-parkway-baltimore-location-01.jpg");}
#loc2 { background: url("../img/taco-loco-restaurant-taqueria-tequila-quesadillas-burritos-margaritas-parkway-baltimore-location-02.jpg");}

header {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#head {
    clear: both;
	float: left;
	width: 100%;
	padding: 8% 0 0;
    background: #fff;
	display: block;
}
.icon { width: 25px; margin-right: 2px; vertical-align: middle;}
#logo {
	clear: both;
	float: left;
	width: 60%;
	display: block;
    z-index: 10;
    margin: 0 20% 4%;
}
#menu {
    clear: both;
	float: left;
	width: 100%;
	text-align:center;
	margin: 0;
	display: block;
    z-index: 10;
    padding: 0;
}
#navigation {
    clear: both;
	float: left;
	width: 80%;
	text-align:center;
	margin: 0;
    background: #a5301b;
	display: block;
    padding: 2.3% 10%;
    font-family: 'Lexend Deca', sans-serif;
    letter-spacing: 1pt;
    color: #fff;
    font-weight: 300;
}
#slide {
    clear: both;
	float: left;
	width: 100%;
	text-align: left;
	margin: 0;
	display: block;
    z-index: 1;
}
.head-txt {
    position: absolute;
    width: 100%;
    margin: 32% 0 0;
    text-align: center;
    transition: 0.6s ease;
}
.slide-txt {
    position: absolute;
    width: 100%;
    margin: 42% 0 0;
    text-align: center;
    transition: 0.6s ease;
}
.slide-txt:hover {
    transition: 0.6s ease;
    cursor: pointer;
}
a .button { font-family: 'Lexend Deca', sans-serif; background: #ff7820; font-size: 14pt; line-height: 45pt; transition: 0.5s ease; padding: 2.5% 5%; font-weight: 500; letter-spacing: 2pt; border-radius: 50px; margin: 0; text-align: center;}
a .button:hover { font-size: 20pt; background: #000000; letter-spacing: 0;}

button { font-family: 'Lexend Deca', sans-serif; background: none; font-size: 14pt; line-height: 22pt; transition: 0.5s ease; padding: 1% 4%; font-weight: 600;  border-radius: 50px; text-align: center; border: 2.5px solid #fff; margin: 0.5% 0.5% 0; color:#fff; }
button:hover { background: #ff7820; border: 2.5px solid #ff7820;}
.act button { background: #ff7820; border: 2.5px solid #ff7820;}

section {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
section.cuisine {
	clear: both;
	float: left;
	width: 70%;
	display: block;
	text-align:center;
    padding: 20% 15%;
    background-image: url("../img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
section.type  {
	clear: both;
	float: left;
	width: 80%;
	display: block;
	text-align:center;
    padding: 20% 10%;
    background-color: #fff;
}
section.cuisine2 {
	clear: both;
	float: left;
    text-align: center;
	width: 80%;
    padding: 30% 10%;
	display: block;
    background: url("../img/taco-loco-restaurant-taqueria-tequila-quesadillas-burritos-margaritas-parkway-baltimore-img-01.jpg");
    background-position: center;
    background-size: cover;
}
section.tacos {
	clear: both;
	float: left;
	width: 70%;
	display: block;
    padding: 15% 15% 80%;
    background-image: url("../img/taco-loco-restaurant-taqueria-tequila-quesadillas-burritos-margaritas-parkway-baltimore-img-02.jpg");
    background-repeat: no-repeat;
    background-position: center 140%;
    background-size: 85% auto;
    background-color: #a5301b;
    text-align: center;
}
.tacos #mod1, .tacos #mod2 { text-align: left; margin: 0; width: 100%;}

/**SECCION MENU**/
section.contact {
	clear: both;
	float: left;
	width: 70%;
    padding: 15%;
	display: block;
}
section.contact #col1 #title { margin-bottom: 10%; width: 100%; text-align: left;}
section.menu {
	clear: both;
	float: left;
	width: 70%;
	display: block;
    padding: 15% 15% 10%;
}
.back1 { background: url("../img/background.jpg"); background-size: cover; background-position: center;}
.back2 { background: #fbeed2;}

#title { clear: both; float: left; display: block; width: 100%; margin-bottom: 3%;}
#title.info { padding:7% 10%; width: 80%; background: #fbeed2; text-align: center;}
#title.info .icon { width: 34px; margin: 0 0 0 8px;}
#col1 #title, #col3 #title { text-align: left; width: 100%;}
#col2 #title, #col4 #title, #col5 #title { text-align: left; width: 100%; margin-top: 6%;}

section.contact #col1 { margin-bottom: 4%; text-align: left;}
section.contact #col2 { margin-bottom: 0; text-align: left;}

#gallery { background: #fff;}
#sec-int { 
    clear: both;
	float: left;
	width: 70%;
    padding: 14% 15% 0;
	display: block;
}
#col1, #col2 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin-bottom: 8%;
}

#col3, #col4 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
}
#col3.draft { text-align: center; border-radius: 50px; padding: 14% 10%; width: 80%; background: #fbeed2; margin-bottom: 8%;}
#col3.draft #title { text-align: center; width: 100%; margin: 0 0 6%;}
#col5 {
    clear: both;
	float: left;
	width: 100%;
	display: block;
    margin-bottom: 12%;
}

#mod1 { float: left; display: block; width: 80%;}
#mod2 { float: left; display: block; width: 70%; text-align: right; margin: 10% 0 0 30%;}

footer {
    clear: none;
	float: left;
	width: 70%;
	display: block;
    background: #000;
    text-align: center;
    padding: 18% 15% 4%;
}
footer img { width: 17%; margin: 8% 0 0;}
#copy {
    clear: both;
	float: left;
    display: block;
	width: 100%;
    margin-top: 15%;
}

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

@media only screen and (min-width: 581px) {
.gridContainer {
	width: 100%;
}
.big { display: block;}
.sma { display: none;}
    
/*PORTAL*/
.portal #logo { width: 50%; padding: 7% 25%; margin: 0;}
.portal footer { padding: 4% 5%; width: 90%;}
a #loc1, a #loc2 { width: 90%; padding: 20% 5%;} 
#choose { padding: 2% 5%; width: 90%;}
    
/*HEADER*/
#head {
    width: 80%;
	padding: 3% 10% 0;        
}
#logo {
	width: 40%;
    margin: 0 30% 1.5%;
}
#menu {
	width: 100%;
	margin: 0;
    padding: 0;
    text-align: center;
    background: none;
}
#navigation {
	width: 80%;
	margin: 0;
    padding: 1.1% 10%;
    letter-spacing: 2pt;
    text-transform: uppercase;
}
.head-txt {
    width: 100%;
    margin: 11% 0 0;
}
.slide-txt {
    width: 100%;
    margin: 21% 0 0;
}
a .button { padding: 1% 2.5%; font-size: 15pt; margin: 3% 0 0;}
a .button:hover { font-size: 17pt; letter-spacing: 0;}
section {
    width: 100%;
}
section.cuisine {
	width: 60%;
    padding: 9% 20%;
}
section.type  {
	width: 90%;
    padding: 15% 5%;
}
section.cuisine2 {
	width: 70%;
    padding: 17% 15%;
}
section.tacos {
	width: 80%;
    padding: 17% 10%;
    background-size: 62% auto;
    background-position: 120% 50%;
}
.tacos #mod1 { width: 50%;}
.tacos #mod2 { width: 40%; clear: both; margin: 6% 0 0;  text-align: right;}
    
/**SECCION MENU**/
section.contact {
	width: 70%;
    padding: 10% 15%;
}
section.contact #col1 { margin-bottom: 4%;}
section.menu { padding: 10% 15% 6%;}
    
#title { width: 80%; margin-bottom: 3%;}
#title.info { padding: 5%; width: 90%; }
section.contact #col1 #title { margin-bottom: 8%; width: 100%;display: block;}
    
#col3.draft { padding: 10% 12% 8%; width: 76%; margin-bottom: 6%;}
#col3.draft #title { margin: 0 0 5%;}
    
#col1 #title, #col3 #title { width: 80%; margin: 0;}
#col2 #title, #col4 #title, #col5 #title { width: 80%; margin: 5% 0 0;}
#col1, #col2 { margin-bottom: 8%;}
#col5 { width: 100%; margin-bottom: 11%;}
hr.line { margin: 1% 0 7%;}
    
footer {
    padding: 9% 10% 1.6%;
    width: 80%;
}
footer img { width: 10%; margin: 4% 0 0;}
#copy {
	margin-top: 6.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;
}  
    
/*PORTAL*/
.portal #logo { width: 40%; padding: 5% 30%;}
a #loc1, a #loc2 { width: 40%; padding: 20% 5%;}
#choose { padding: 1.5% 5%;}
    
/*HEADER*/
#head {
    width: 90%;
    padding: 1.5% 5%;
}
#logo {
	width: 20%;
    margin: 0;
}
#menu {
	width: 70%;
    clear: none;
	margin: 0 0 0 10%;
    text-align: right;
}
.head-txt {
    width: 100%;
    margin: 15% 0 0;
}
.slide-txt {
    width: 100%;
    margin: 19% 0 0;
}
    
a .button { padding: 13px 3%; font-size: 15pt; margin: 10% 0 0;}
a .button:hover { font-size: 17pt;}
button { font-size: 14pt; line-height: 22pt; padding: 0.8% 4%; margin: 0.5% 0.6% 0;}
    
section {
    width: 100%;
}
section.cuisine {
	width: 80%;
    padding: 10%;
}
section.type  {
	width: 90%;
    padding: 12% 5%;
}
section.cuisine2 {
	width: 70%;
    padding: 15%;
}
section.tacos {
	width: 88%;
    padding: 12% 6%;
    background-position: 56% 50%;
    background-size: 46% auto;
}
.tacos #mod1 { width: 35%; margin: 0;}
.tacos #mod2 { width: 50%; margin: 12% 0 0 50%;}
    
/**SECCION MENU**/
section.menu, section.contact {
	width: 80%;
    padding: 7% 10% 3%;
}
section.contact #col1 #title { margin-bottom: 15%; width: 100%;}

.icon { width: 22px; margin-right: 2px;}
#title { margin: 0 10% 2%; text-align: center; width: 80%;}
#title.info { padding: 2% 8%; width: 84%; margin: 0;}
#col1 #title, #col2 #title, #col3 #title, #col4 #title, #col5 #title { text-align: left; width: 100%; margin: 0 0 2%;}
hr.line { margin: 0 0 5%;}
#col1 { width: 45%; margin: 0 10% 6% 0;}
#col2 { width: 45%; clear: none; margin: 0 0 6%;}
#col3 { width: 30%; margin-bottom: 7%;}
#col4, #col5 { width: 30%; margin: 0 0 7% 5%; clear: none;}
    
#col3.draft { padding: 5%; width: 18%; margin-right: 2%;}
#col3.draft #title { margin: 0 0 10%;}
  
section.contact #col1 { margin-bottom: 0;}

footer {
    padding: 9% 10% 1.6%;
    width: 80%;
}
footer img { width: 8%; margin: 4% 0 0;}
#copy {
	margin-top: 6.5%;
}

}