/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/* CSS HEX */
/*
--selective-yellow: #FCB902ff;
--copper-penny: #B06C64ff;
--smoky-black: #0C0102ff;
--bistre: #271812ff;
--bleu-de-france: #0786E4ff;
--cultured: #EBECEEff;
*/

/******************************************
/* BASE STYLES
/*******************************************/

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Source Sans Pro', sans-serif;
  background: #f0cb87 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAA2BAMAAACy8k0FAAAAG1BMVEUAAAD0zozsxoTkwoT0zoT0yoTkxoTsyoTkvoQRMYnpAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAw9JREFUOI0dU8t66kYMnkcoDIm3eMZ4usTS2MqSYBJvA6Z4G2zO8RZGjtV92tPX7rRrfdJ/lUKhN905vhEu7YK8l61Cfdq8eeJxWTbF3o6F3SmX+C8ZugKslONxOsz9h5o4x00IKAC5Tg745LfqnDsKQVPDqUzFsw423rNDb8Vjwle0wdLV/qYyXR7fCd5shXCSuQi0ViGMAOwFqBsMSxHmnUoxKfY18lTIw6ebDNKdAs0nLCtTozEbzMvXuGsqA+L6qgo44WBftNuqx/s+WDM/NCeuJ5f68KnmC1b5sMJHqMDyoge4KxQNnp4RJ64knLvTvFaYV4HElYKtPIl0OX+oud18PU1QvqaU19KUmrbquBdzcP2vvq8H0/VhD2uVvh54aib7DI+/01sd+hAxzO0szR4ywa9bZbvWrdVgbeTQZqJxRc0VJI86pNG1WP8XoxtvM57SyGUpDr4cLgtXtVVBG7NVYE20nRnl6q0dj1hsVdIHyAiPMEPCJ5Y33CmymP7gZEZBerkU8tR8qrHofxgELo1kco5n/s+oar1QuW+PRw/pYF/v6kCUZ4BRmIcOf4aV/1QdwWRxLBFrQVPBPH0oQN1K0ZIeGIZxogHv6nd7HblhXOHmAfVPabKtMugSicTBX/6AOAv5f5mjnW1NARtfMA3DsFUFPwK33wvet9EUxDzqdWxWlF/m1RkxlPn5hlHHnnnmzJzsCHIib0879Rq7stez6NFGgtUpSMQoE7B9WG5QGPqiqOqYR2BHNXQ2zH1LB9PxXRVHMchWHjKEP8U0Zryr3BeS+RlqAo3+YHveqkX+bOELkUK27GlFFPs3AXEubmNbA3PRZTZ6KglmiZBhRIYm1hnXyo8pPzTu41ONuqX3DnbqsrDPxJHt1Ke3DoyGDxWXSo/ZIQvhrewTW0ZcG9u6qIowcOCXx/eijx0fpwHn03txZV4N4hzlO6XpiHhOuXLBEYCby0/lhBxzcAMLkYyUT3fVE4SYGDPrPiWJQawVE3CG1PfHU7jE78L5Q4VkIUHHd/iOPmfmnwzX/wKMMxWNv8xMnwAAAABJRU5ErkJggg==);
}
.intro {
  color: #B06C64ff;
}
h2 {
  font-size: 2.2rem;
}
a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
/******************************************
/* LAYOUT
/*******************************************/
#wall {
  background-image: url("/images/aztlan\ wall.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 92vw;
  height: 65vh;
  margin-bottom: 5vh;
  -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.73);
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.73);
box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.73);
}
* {
  scroll-behavior: smooth;
}

/******************************************
/* NAV
/*******************************************/
nav {
  background-color: black;
  width: 100vw;
  display: flex;
  justify-content: center;
  position: fixed;
  color: wheat;
}
nav ul{
  width: 70vw;
  height: 6vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav li {
  border-right: 1px solid #f5deb3ac;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5vh 4vw;
}
nav li:first-child {
  border: none;
}
nav li:first-child + li {
  border-left: 1px solid #f5deb3ac;
}
nav li:hover {
  background-color: rgb(15, 15, 15);}
nav li:first-child:hover {
  padding: 0 4vw;
  transform: scale(0.9);
  background-color: rgb(0, 0, 0);
}
nav a {
  text-decoration: none;
  color: wheat;
}
nav img {
  max-width: 10vh;
}
nav #logo {
  justify-self: flex-end;
}
/******************************************
/* main
/*******************************************/

#main {
  margin: 15vh 0 10vh 7vw;
  height: 25vh;
  color: #0C0102ff;
  width: 30%;
}

#main input {
  width: 15vw;
}
#socials {
  display: flex;
  margin-top: 2vh;
  margin-left: 2vw;
  width: 30%;
  justify-content: space-around;
}

/******************************************
/* ABOUT US
/*******************************************/

#aboutus {
  color: #EBECEEff;
  background-image: url("/images/aztlan_pared.png");
  background-size: cover;
  -webkit-box-shadow: 0px 0px 24px 18px rgba(0,0,0,0.73);
-moz-box-shadow: 0px 0px 24px 18px rgba(0,0,0,0.73);
box-shadow: 0px 0px 24px 18px rgba(0,0,0,0.73);
font-size: 1.1rem;
color: wheat;
}
#aboutus div {
  margin: 5vh 2vw 5vh 5vw;
  height: 40vh;
  width: 35vw;
}


/******************************************
/* CARTA
/*******************************************/

#carta {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#carta ul {
  display: flex;
  align-items: center;  
}
#carta #platos {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
#platos img {
  margin: 1vw;
  width: 17vw;
  height: 17vw;
  border-radius: 5%;
  -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.73);
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.73);
box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.73);
}
#platos img:hover {  
  border: 2px solid rgba(255, 208, 0, 0.845);
  transform: scale(1.1);
}


/******************************************
/* RESERVA
/*******************************************/
#reserva {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#reserva section {
  padding: 5vh 5vw;
  border: 5px double black;
  border-radius: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#reserva .agenda {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#reserva .agenda img {
  width: 25vw;
  margin: 2vh 2vw;
  border-radius: 14px;
}
.agenda i:hover {
  transform: scale(1.2);
}
#horarios, #horarios section{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#horarios * {
  margin: 0 2vw;
}

#reserva h2 span {
  border-bottom: 3px solid black;
}
#horarios div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#horarios h3 {
  margin-bottom: 2vh;
  border-bottom: 1px solid rgba(0, 0, 0, 0.728);
}

/******************************************
/* COMENTARIOS
/*******************************************/
#comentarios {
  width: 50%;
  margin: 5vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#comentarios img{
  border-radius: 50%;
  width: 12vw;
  border: 4px double black;
}
#comentarios h4, #comentarios h3{
  font-family: 'Roboto', sans-serif;
  color: rgb(30, 29, 29);
}

/******************************************
/* FOOTER
/*******************************************/
footer {
  height: 8vh;
  width: 100vw;
  background-color: rgba(33, 32, 32, 0.452);
}
footer ul {
  height: 8vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 10vw;
  align-items: center;
  list-style: none;
}
footer li {
  text-decoration: none;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
.puntos {
  color: rgb(160, 109, 41);
  display: inline-block;
  font-size: 5rem;
  margin: 0 auto;
  vertical-align: baseline;
}
.grande {
  color: rgb(160, 109, 41);
  display: inline-block;
  font-size: 8rem;
  
}


/* #main, #aboutus, #carta, #reserva, #comentarios {
  border: 1px solid black;

} */