@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Gabriela&display=swap');



.textohori {   /* texto dentro de los botones */

font-family: 'Gabriela', serif;
  font-size: 3vw;
  font-weight: 900;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #AA9778;
  line-height: 18px;
  letter-spacing: 1px;
text-align: center;
  align-content: center;


  }

@media (min-width: 550px) {    /* desde los 550px se transforma a el tamaño font 18px*/
   .textohori  {
        font-size: 18px;
	    line-height: 28px;
    }
}






.tira {
	width: 100%;
  display: table;
  margin: 0;
cellpadding: 0; /* con esto elimino el espacio de los lados el borde, si lo saco aparecen los lados*/

table-layout: fixed;
border-collapse:collapse;
}

nav a {
  display: table-cell;
  color: white;
  text-align: center;
  font-size: 2em;
  padding: 0.5em;
	box-sizing: border-box;

}

@media (max-width: 200px) {
  nav a {
    font-size: 1.5em;
  }
}
nav a:first-child {
  border-radius: 0 0 0 0;
}
@media (max-width: 200px) {
  nav a:first-child {
    border-radius: 0;
  }
}
nav a:last-child {
  border-radius: 0px 0px 0px 0px;
}
@media (max-width: 200px) {
  nav a:last-child {
    border-radius: 0;
  }
}

/*
Here's a handy list of social media colors: https://goo.gl/7uo5TR 
*/
/*Facebook*/
/*Twitter*/
/*Google Plus*/
/*Instagram*/
/*Tumblr*/
/*Flickr*/
/*Vine*/
/* 
Setting equal widths dependent on the number of links.
Add or remove as many as necessary.
*/
/* one item */
nav a:first-child:nth-last-child(1) {
  width: 100%;
}

/* two items */
nav a:first-child:nth-last-child(2),
nav a:first-child:nth-last-child(2) ~ a {
  width: 50%;
}

/* three items */
nav a:first-child:nth-last-child(3),
nav a:first-child:nth-last-child(3) ~ a {
  width: 33.3333%;
}

/* four items */
nav a:first-child:nth-last-child(4),
nav a:first-child:nth-last-child(4) ~ a {
  width: 25%;
}

/* five items */
nav a:first-child:nth-last-child(5),
nav a:first-child:nth-last-child(5) ~ a {
  width: 20%;
}

/* six items */
nav a:first-child:nth-last-child(6),
nav a:first-child:nth-last-child(6) ~ a {
  width: 16.666%;
}

/* seven items */
nav a:first-child:nth-last-child(7),
nav a:first-child:nth-last-child(7) ~ a {
  width: 14.285%;
}

/* eight items */
nav a:first-child:nth-last-child(8),
nav a:first-child:nth-last-child(8) ~ a {
  width: 12.5%;
}

/*
Assigning link background colors and setting the hover and active states. For quick adding of buttons, perform a search + replace on the 2 letter variable name.
*/
nav a.reser {   /* TEXTO RESERVAS */
   background: #363636;
  text-shadow: 1px 1px 5px #000000;  /* SOMBRA DEL TEXTO */
	text-decoration: none;
	 border: 4px solid #000000; 
}
nav a.reser:hover {
  color: #96271a !important;
  background: #96271a;
}
nav a.reser:active {
   color: #363636;
  background: #871C1C;
}




nav a.cum {    /* TEXTO RESERVAR CUMPLEAÑOS */
   background: #363636;
  text-shadow: 1px 1px 5px #000000;  /* SOMBRA DEL TEXTO */
	text-decoration: none;
	 border: 4px solid #000000; 
}
nav a.cum:hover {
  color: #96271a !important;
  background: #96271a;
}
nav a.cum:active {
   color: #363636;
   background: #871C1C;
}



nav a.vip {   /* TEXTO RESERVAR VIP */
   background: #363636;
  text-shadow: 1px 1px 5px #000000;  /* SOMBRA DEL TEXTO */
	text-decoration: none;
	 border: 4px solid #000000; 
}
nav a.vip:hover {
  color: #96271a !important;
  background: #96271a;
}
nav a.vip:active {
   color: #363636;
  background: #871C1C;
}