body {
  --btn-size: 150px;
  width: 100%;
  height: 100vh;
  place-items: center;
}

.menuMov {
  display:none;
}

.menu {
  position: relative;
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  line-height: 100%;
  margin-left: 42%;
  margin-top: -13px;
}

.menu:after {
  content: "\2630";
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  background: var(--accent-color);
  border-radius: inherit;
  font-size: calc(var(--btn-size) * 0.48);

}
.open_menu:after {
  /*content: "\00D7";*/
  content: url("../img/logo4.png");

}

.nav-item {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  user-select: none;
  left: 0;
  top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
}

.open_menu .nav-item {
  transform: scale(1) rotate(360deg);
}

.open_menu .nav-item:hover {
  width: 400px;
  height: 150px;
}

.open_menu .nav-itemC:nth-child(1) {
  top: calc(var(--btn-size) * -0.3);
  left: calc(var(--btn-size) * -1.2);
}
.open_menu .nav-itemR:nth-child(2) {
  top: calc(var(--btn-size) * -1.3);
  left: 0px;
}
.open_menu .nav-itemPo:nth-child(3) {
  top: calc(var(--btn-size) * -0.3);
  left: calc(var(--btn-size) * 1.2);
}
.open_menu .nav-itemE:nth-child(4) {
  top: var(--btn-size);
  left: calc(var(--btn-size) * -0.8);
}
.open_menu .nav-itemL:nth-child(5) {
  top: var(--btn-size);
  left: calc(var(--btn-size) * 0.8);
}

/* RES */

.nav-itemR {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  user-select: none;
  left: 0;
  top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
  background: url(../img/res.png) no-repeat;
}

.open_menu .nav-itemR {
  transform: scale(1) rotate(360deg);
}

.open_menu .nav-itemR:hover {
  width: 400px;
  height: 150px;
  background: url(../img/res2.png) no-repeat;
  z-index: 999998;
}

/* CERDO */

.nav-itemC {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  user-select: none;
  left: 0;
  top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
  background: url(../img/puerco.png) no-repeat;
}

.open_menu .nav-itemC {
  transform: scale(1) rotate(360deg);
}

.open_menu .nav-itemC:hover {
  width: 400px;
  height: 150px;
  background: url(../img/puerco2.png) no-repeat;
  z-index: 999998;
  top: calc(var(--btn-size) * -0.3);
  left: calc(var(--btn-size) * -2.87);
}

/* POLLO*/

.nav-itemPo {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  user-select: none;
  left: 0;
  top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
  background: url(../img/pollo.png) no-repeat;
}

.open_menu .nav-itemPo {
  transform: scale(1) rotate(360deg);
}

.open_menu .nav-itemPo:hover {
  width: 400px;
  height: 150px;
  background: url(../img/pollo2.png) no-repeat;
  z-index: 999998;
}

/* EMBUTIDOS */

.nav-itemE {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  user-select: none;
  left: 0;
  top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
  background: url(../img/embutido.png) no-repeat;
}

.open_menu .nav-itemE {
  transform: scale(1) rotate(360deg);
}

.open_menu .nav-itemE:hover {
  width: 400px;
  height: 150px;
  background: url(../img/embutido2.png) no-repeat;
  z-index: 999998;
  top: calc(var(--btn-size) * 1);
  left: calc(var(--btn-size) * -2.44);
}

/* LACTEOS */

.nav-itemL {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  user-select: none;
  left: 0;
  top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
  background: url(../img/lacteos.png) no-repeat;
}

.open_menu .nav-itemL {
  transform: scale(1) rotate(360deg);
}

.open_menu .nav-itemL:hover {
  width: 400px;
  height: 150px;
  background: url(../img/lacteos2.png) no-repeat;
  z-index: 999998;
}

/* Large Mobile :480px. */

@media only screen and (max-width: 767px) {
  .menuMov {
		display:block;
    width: 100%;
    place-items: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
    line-height: 100%;
    margin-top: -300px;
	}
	.menu {
		display:none;
	}
}

/* Medium Mobile :480px. */

@media only screen and (max-width: 576px) {
  .menuMov {
		display:block;
	}
	.menu {
		display:none;
	}
}

/* Small Mobile :320px. */

@media only screen and (max-width: 479px) {
  .menuMov {
		display:block;
	}
	.menu {
		display:none;
	}
}