body {
  background-image: url("./img/fondof.png");
  background-size: cover;
  background-attachment: fixed;
}
@font-face {
  font-family: "angel_fireregular";
  src: url("./Fonts/AngelFirekit/angel_fire-webfont.woff2") format("woff2"),
    url("./Fonts/AngelFirekit/angel_fire-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "placard_nextregular";
  src: url("./Fonts/PlacardNextkit/placardnextregular-webfont.woff2")
      format("woff2"),
    url("./Fonts/PlacardNextkit/placardnextregular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.nav-scroller {
  position: relative;
  z-index: 7;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.dropdown-toggle {
  outline: 0;
}

.btn-toggle {
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
}
.btn-primary:hover {
  background-color: #000000;
  border-color: 2px solid #ffffff;
}
.btn-toggle:focus {
  color: rgb(255, 65, 103);
  background-color: rgb(255, 65, 103);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgb(255, 65, 103);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: #ff4167;
}

.scrollarea {
  overflow-y: auto;
}
.nav{
  position: fixed;
  z-index: 5;
  top: 0;
  background-color: #ff4167;
  display: block;
  width: 20%;
  min-width: 175px;
  min-height: 500px;
  height:100%;
}
.fnegra {
  width: 100%;
  min-width: 2vw;
  position: relative;
  margin-top: 25px;
  z-index: 11;
}
.navtxt {
  position: relative;
  z-index: 11;
  font-family: angel_fireregular;
  font-size: 3.5vw;
  min-height: 60px;
  color: black;
  margin-left: 10px;
}
.borde {
  position: relative;
  z-index: 3;
  margin-top: -65px;
}
.logo {
  height: 40vw;
  min-height: 350px;
  display: block;
  margin-left: 30vw;
  margin-bottom: -27%;
  margin-top: 10px;
  padding-top: -100px;
  position: relative;
  z-index: 4;
}
.bottomright{
  position: fixed;
  bottom: 1px;
  width: 100%;
}
.imggris{
  filter:grayscale(100%);
}
.card:hover > .imggris { 
  filter:grayscale(0%); 
}
.card {
  width: 95%;
  height: 98%;
  background-color: #000000;
  border: 2px solid #ff4167;
  margin-left: -30px;
}
.card:hover {
  border-color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.card1 {
  width: 22vw;
  height: 22vw;
  min-width: 200px;
  min-height: 200px;
  background-color: #000000;
  border: 2px solid #ff4167;
  margin-bottom: 20px;

}
.card1:hover {
  filter: brightness(1000%);
}
.card2 {
  width: 90%;
  width: auto;
  height: 100%;
}
.card3{
  width: 90%;
  margin-top: 20px;
  background-color: #000000;
  border: 2px solid #ff4167;
}
h2 {
  font-family: placard_nextregular;
}
.cartainfo {
  position: fixed;
  right: 10px;
  width: 40vw;
  float: left;
}
.categoria {
  font-family: angel_fireregular;
  color: #ffffff;
  font-size: 100px;
  margin-left: 5px;
}
.plato {
  font-family: angel_fireregular;
  color: #ff4167;
  font-size: 30px;
  margin-top: 40px;
  margin-left: 5px;
}
.info {
  font-family: placard_nextregular;
  color: #ffffff;
  font-size: 20px;
  margin-top: -20px;
  margin-left: 5px;
}
h5 {
  font-family: angel_fireregular;
  font-size: 35px;
  color: #ff4167;
}
.carta {
  font-family: angel_fireregular;
  font-size: 30px;
  color: #ffffff;
  z-index: 4;
  position: relative;
  margin: -30%;
}
.imgcarta {
  width: 75%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  z-index: 4;
}
.imgtoro {
  width: 100%;
}
.imgredes{
  width: 15%;
  margin-left: -30px;
  float: left;
  filter: brightness(1000%);
}
.txtredes{
  color: #ff4167;
  font-size: 40px;
  margin-left: 10px;
  text-align: center;
}
.contaco{
  filter: brightness(1000%);
}
.contaco:hover{
  filter: brightness(100%);
}
.botonmenu {
  background-color: black;
}

a {
  text-decoration: none;
  font-family: placard_nextregular;
  color: white;
}
.map:hover {
  color: #ff4167;
  -webkit-text-fill-color: #ff4167;
}
a:hover {
  color: white;
}
.fs-4:hover {
  color: white;
}