*{
	margin:0;
	padding:0;
}
@font-face{
	font-family:kaushanscript;
	src:url("../fonts/KaushanScript-Regular.otf");
}
img{
	width:100%;
	height:100%;
	

}
img.logo{
	width:25%;
	height:100%;
	float:left;
	background-color:white;
}

header{
	width:100%;
	height:7vw;
	background-color:white;
}
button#hamburger-icon{
	width:5%;
	height:70%;
	transform:none;
	float:right;
	margin:0%;
	margin-top:1%;
	margin-right:2%;
	font-size:20pt;
	display:inline-block;
}
nav{
	width:75%;
	position:fixed;
	transform:translateX(230vw);
	height:auto;
	transition:2s;
	background-color:white;
	float:right;
	line-height: 2em;
	z-index: 9999;

}

nav.slide-the-drawer{
	transform:translateX(50vw);
	z-index: 9999;
	margin-top:6%;
}

ul{
	width:75%;
	float:none;

}
li{
	
	display:inline-block;
	margin-top:3%;
	margin-left:8%;
	text-decoration-color: white;
	text-align:center;
}

a{
	font-family: "kaushanscript",serif;
	font-size:12pt;
}
h1{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:36pt;
	text-align: center;
}

h2{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:22pt;
	float:left;
	margin-left:5%;

}
h3{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:14pt;
	
}
h4{
	font-family:"Palatino","Times New Roman",serif;
	font-size:10pt;
	color:white;
}

body{
	width:100%;
	height:100%;
	background-image: url(../img/background-gardient.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

main{
	width:78%;
	height:auto;
	background-color:gray;
	display:inline-block;
	margin-left:10%;
	margin-right:10%
	margin-top:0%;
}
section{
	width:100%;
	height:45%;

}
section.bottom-home{
	width:100%;
	height:30%;
	float:left;
	display:inline-block;
	margin-top:2%;
	
}
div{
	width:100%;
	height:100%;
}
figure{
	width:35%;
	float:left;
	display:inline-block;
	
}
figure.direction{
	width:auto;
	height:auto;

}




footer{
	width:100%;
	height:5.5vw;
	float:left;
	margin-top:2%;
	margin-bottom:0;
	background-color:white;
	position:relative;
}
footer a{
	color:white;
}
footer li{
	width:10%;
	list-style-type:none;
	margin-left:3%;
	background-color:black;
}
footer ul{
	width:100%;
	float:none;
}
/*Home*/


figure.icons{
	width:15%;
	height:100%;
	float:left;
	display:inline-block;
}


img.molecajete{
	height:100%;
}

img.right-home-pic{
	height:100%;
	float:right;
}

figure.right-img{
	width:35%;
	float:right;
	display:inline-block;
	background-color: orchid;
}
img.menu-icon{
	width:100px;
	height:100px;
	margin-right:2%;
}

button{
margin-top:15%;
display:block;
}

/*ABOUT*/
section.about{
	width:45%;
	height:80%;
	display:inline-block;
	float:left;
	margin-left:5%;
}
img.about-pic{
	width:100%;
	height:100%;
}

section#map{
	width:100%;
	height:70vh;
	float:left;
	display:inline-block;
	margin-top:5%;
	margin-left:5%;
}

iframe{
	float:left;

}

/*RESERVATION*/
form{
	width:100%
	height:auto;
}

input{
	display:block;
	margin:auto;
	margin-left:3%;
	padding:0.5vh;
	border:2px solid lightpink;
	background-color:white;
}


input:focus {
	background-color:yellow;
}
form ul{
	width:100%;
	margin:0;
	float:left;
	display:inline-block;
}
form button{
	margin-left:40%;
	background-color:pink;
}
form li{
	margin:0;
	margin-left: 35%;
	margin-bottom:3%;
	display:block;
	text-align:left;

}
/*PRODUCTOS*/
section.productos{
 width:100%;
 height:1000px;
 margin-top:5%;
 display:inline-block;
 background-color:orchid;
}

figure.productos{
width:35%;
height:25%;
margin:8%;
margin-right:3%;
display:inline-block;
background-color:crimson;
}
/*MENU*/
section.second{
	width:100%;
	height:35%;
	font-size:12pt;
	background-color:#f368b9;
	display:inline-block;
}

section.second a{
	color:white;
}
section.dishes{
	width:40%;
	height:100%;
	display:inline-block;
	float:left;
	

}
figure.dish-name{
	width:100%;
	height:30px;
	display:block;
	float:left;
	margin-top:2%;
	
}
figure.about-dish{
	width:100%;
	height:auto;
	display:block;
	float:left;
	margin-top:2%;
	
}

section.menu-images{
	width:20%;
	height:auto;
	display:inline-block;
	float:left;
}

img.food-icons{
	width:100%;
	margin:15%;
}
/*smartphone*/
@media screen and (max-width:479px){

img{
	width:100%;
	height:100%;
}

img.logo{
	width:50%;
	height:100%;
	float:left;
	background-color:white;
}

header{
	width:100%;
	height:80px;
	background-color:white;
	position:fixed;
}
button#hamburger-icon{
	width:15%;
	height:70%;
	float:right;
	
	margin:0%;
	margin-top:3%;
	margin-right:2%;
	font-size:20pt;
	display:inline-block;
}

button#hamburger-icon:hover{
	transform:none;
}
nav{
	width:50%;
	position:fixed;
	transform:translateX(230vw);
	height:auto;
	transition:2s;
	background-color:white;
	float:right;
	margin-top:18%;
	line-height: 2em;
	z-index: 9999;

}

nav.slide-the-drawer{
	transform:translateX(50vw);
	z-index: 9999;
	margin-top:18%;
}
ul{
	width:75%;
	float:right;

}
li{
	
	display:block;
	margin-top:3%;
	margin-left:8%;
	text-decoration-color: white;
	text-align:center;
}

a{
	font-family: "kaushanscript",serif;
	font-size:12pt;
}
h1{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:36pt;
	text-align: center;
}

h2{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	width:100%;
	font-size:22pt;
	float:left;
	margin-left:5%;

}
h3{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:18pt;
	text-align: left;
}
h4{
	font-family:"Palatino","Times New Roman",serif;
	font-size:10pt;
	color:white;
}

body{
	width:100%;
	height:100%;
	background-image: url(../img/background-gardient.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

main{
	width:78%;
	height:auto;
	background-color:gray;
	display:inline-block;
	margin-left:10%;
	margin-right:10%;
	margin-top:20%;
}
section{
	width:100%;
	height:45%;

}
section.bottom-home{
	width:100%;
	height:100%;
	float:left;
	display:inline-block;
	margin-top:2%;
	
}
div{
	width:100%;
	height:45%;
}
figure{
	width:100%;
	float:left;
	display:inline-block;
	
}
figure.direction{
	width:auto;
	height:auto;

}




footer{
	width:100%;
	height:5.5vw;
	float:left;
	margin-top:2%;
	margin-bottom:0;
	background-color:white;
	position:relative;
}

footer li{
	width:25%;
	background-color:black;
	list-style-type:none;
	margin-left:3%;
}
footer ul{
	width:100%;
	float:none;
}

footer a{
	color:white;
}
/*Home*/

.fotorama{
	display:inline-block;
}
figure.icons{
	width:100%;
	height:25%;
	float:left;
	display:inline-block;
}

img.molecajete{
	width:100%;
	height:25%;
	display:inline-block;
}

img.right-home-pic{
	height:25%;
	float:right;
}

figure.right-img{
	width:100%;
	float:right;
	display:block;
	background-color: orchid;
}
img.menu-icon{
	width:100px;
	margin-left:none;
}

button{
width:45%;
margin-top:15%;
display:inline-block;
margin-left:2%;
}

/*ABOUT*/
section.about{
	width:100%;
	height:80%;
	display:inline-block;
	float:left;
	margin-left:0%;
}
img.about-pic{
	width:100%;
	height:100%;
}

section#map{
	width:100%;
	height:70vh;
	float:left;
	display:inline-block;
	margin-top:5%;
	margin-left:0%;
}

iframe{
	width:100%;
	float:left;

}

/*RESERVATION*/
form{
	width:100%
	height:auto;
}

input{
	display:block;
	margin:auto;
	margin-left:3%;
	padding:0.5vh;
	border:2px solid lightpink;
	background-color:white;
}


input:focus {
	background-color:yellow;
}
form ul{
	width:100%;
	margin:0;
	float:left;
	display:inline-block;
}
form button{
	margin-left:40%;
	background-color:pink;
}
form li{
	margin:0;
	margin-left: 35%;
	margin-bottom:3%;
	display:block;
	text-align:left;

}
/*PRODUCTOS*/
section.productos{
 width:100%;
 height:none;
 margin-top:5%;
 margin-bottom:30%;
 display:inline-block;
}

figure.productos{
width:100%;
height:25%;
margin:0%;
margin-right:0%;
margin-top:5%;
display:inline-block;
background-color:crimson;
}
/*MENU*/
section.second{
	width:100%;
	height:35%;
	font-size:12pt;
	background-color:#f368b9;
	display:inline-block;
}
section.dishes{
	width:40%;
	height:100%;
	display:inline-block;
	float:left;
	margin-left:6.5%;

}
figure.dish-name{
	width:100%;
	height:auto;
	display:inline-block;
	float:left;
	margin-top:2%;
	
}
figure.about-dish{
	width:100%;
	height:30px;
	display:inline-block;
	float:left;
	margin-top:2%;
	
}
section.menu-images{
	width:100%;
	height:auto;
	display:inline-block;
	float:left;
}

img.food-icons{
	width:45%;
	margin:15%;
}

}

@media screen and (min-width:488px) and (max-width: 767px) {

	img{
	width:100%;
	height:100%;
}

img.logo{
	width:50%;
	height:100%;
	float:left;
	background-color:white;
}

header{
	width:100%;
	height:80px;
	background-color:white;
	position:fixed;
}
button#hamburger-icon{
	width:15%;
	height:70%;
	float:right;
	
	margin:0%;
	margin-top:3%;
	margin-right:2%;
	font-size:20pt;
	display:inline-block;
}

button#hamburger-icon:hover{
	transform:none;
}
nav{
	width:50%;
	position:fixed;
	height:auto;
	transform:translateX(200vw);
	transition: 2s;
	background-color:white;
	float:right;
	margin-top:13%;
	line-height: 2em;
	z-index: 9999;


}

nav.slide-the-drawer{
	transform:translateX(50vw);
	z-index: 9999;
	position:fixed;
	margin-top:13%;
}
ul{
	width:75%;
	float:right;

}
li{
	
	display:block;
	margin-top:3%;
	margin-left:8%;
	text-decoration-color: white;
	text-align:center;
}

a{
	font-family: "kaushanscript",serif;
	font-size:12pt;
}
h1{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:36pt;
	text-align: center;
}

h2{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	width:100%;
	font-size:22pt;
	float:left;
	margin-left:5%;

}
h3{
	font-family: "Philosopher","Baskerville",serif;
	color:white;
	font-size:18pt;
	text-align: left;
}
h4{
	font-family:"Palatino","Times New Roman",serif;
	font-size:10pt;
	color:white;
}

body{
	width:100%;
	height:100%;
	background-image: url(../img/background-gardient.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

main{
	width:78%;
	height:auto;
	background-color:gray;
	display:inline-block;
	margin-left:10%;
	margin-right:10%;
	margin-top:15%;
}
section{
	width:100%;
	height:45%;

}
section.bottom-home{
	width:100%;
	height:100%;
	float:left;
	display:inline-block;
	margin-top:2%;
	
}
div{
	width:100%;
	height:45%;
}
figure{
	width:100%;
	float:left;
	display:inline-block;
	
}
figure.direction{
	width:auto;
	height:auto;
	margin-left:15%;
}




footer{
	width:100%;
	height:5.5vw;
	float:left;
	margin-top:2%;
	margin-bottom:0;
	background-color:white;
	position:relative;
}

footer li{
	width:25%;
	background-color:black;
	list-style-type:none;
	margin-left:3%;
}
footer ul{
	width:100%;
	float:none;
}

footer a{
	color:white;
}
/*Home*/
figure.icons{
	width:100%;
	height:25%;
	float:left;
	display:inline-block;
}

img.molecajete{
	width:100%;
	height:25%;
	display:inline-block;
}

img.right-home-pic{
	height:25%;
	float:right;
}

figure.right-img{
	width:100%;
	float:right;
	display:block;
	background-color: orchid;
}
img.menu-icon{
	width:45%;
	margin-left:none;
}

button{
width:45%;
margin-top:15%;
display:inline-block;
margin-left:2%;
}

/*ABOUT*/
section.about{
	width:100%;
	height:80%;
	display:inline-block;
	float:left;
	margin-left:0%;
}
img.about-pic{
	width:100%;
	height:100%;
}

section#map{
	width:100%;
	height:70vh;
	float:left;
	display:inline-block;
	margin-top:5%;
	margin-left:0%;
}

iframe{
	width:100%;
	float:left;
	margin-left:15%;

}

/*RESERVATION*/
form{
	width:100%
	height:auto;
}

input{
	display:block;
	margin:auto;
	margin-left:3%;
	padding:0.5vh;
	border:2px solid lightpink;
	background-color:white;
}


input:focus {
	background-color:yellow;
}
form ul{
	width:100%;
	margin:0;
	float:left;
	display:inline-block;
}
form button{
	margin-left:40%;
	background-color:pink;
}
form li{
	margin:0;
	margin-left: 35%;
	margin-bottom:3%;
	display:block;
	text-align:left;

}
/*PRODUCTOS*/
section.productos{
 width:100%;
 height:none;
 margin-top:5%;
 margin-bottom:30%;
 display:inline-block;
}

figure.productos{
width:100%;
height:25%;
margin:0%;
margin-right:0%;
margin-top:5%;
display:inline-block;
background-color:crimson;
}
/*MENU*/
section.second{
	width:100%;
	height:35%;
	font-size:12pt;
	background-color:#f368b9;
	display:inline-block;
	margin-top:14%;
}
section.dishes{
	width:100%;
	height:100%;
	display:inline-block;
	float:left;
	margin-left:0%;

}
figure.dish-name{
	width:100%;
	height:30px;
	display:block;
	float:left;
	margin-top:2%;
	
}
figure.about-dish{
	width:100%;
	height:30px;
	display:block;
	float:left;
	margin-top:2%;
	
}
section.menu-images{
	width:100%;
	height:auto;
	display:inline-block;
	float:left;
}

img.food-icons{
	width:45%;
	margin:15%;
}

}