* {
	scroll-behavior: smooth;
}

body {
	font-size: 22px;
	background-image: url("../multimedia/images/de.png");
	background-position: center;
	background-color: #111;
	background-attachment: fixed;
	color: #dbeffe;
	font-family: 'Sen', sans-serif;
	text-align: center;
}

h4 {
	font-size: 18px;
	padding: 20px;
}

p {
	text-align: center;
}

a {
	text-decoration: none;
	color: #fff;
}

section {
	margin: 10px auto;
}


nav a {
	color: #fff;
	text-decoration: none;
}

img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}


.text-promo-especial {
	color: #f8f32b;
	background:  #000d;
	max-width: 90%;
	text-align: center;
	margin: 10px auto;
	font-size: 26px;
	border-radius: 10px;
	padding: 5px;
}

.nav-header {
	display: none;
}


.img-logo-container {
	height: 180px;
	width: 100%;
	overflow: hidden;
}

.inicio {
	display: flex;
	text-align: center;
	align-content: center;
	flex-direction: column;
	margin: 10px auto;
}
.img-menu-item {
	cursor: pointer;
	height: 250px;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.menu-info {
	margin: 10px auto;
}



.menu-container {
	display: grid;
	transform: scale(1);
	transition: transform .4s;
	margin: auto;
}
.container-menu-pizzas, .container-menu-hamburguesas, 
.container-menu-complementos, .container-menu-bebidas,
.container-menu-especial {
	margin: 10px auto;
	transition: width .3s, height .6s;
  	width: 99%;
	height: 485px;
	overflow: hidden;
	display: flex;
}


.ul-menu-food {
	list-style: none;
	display: grid;
	grid-template-rows: minmax(min-content, max-content);
	grid-auto-rows: minmax(min-content, max-content);
	place-items: center;
	gap: 6px;
	grid-template-columns: 1fr 1fr;
}
.calzone-menu {
	display: grid;
	grid-column: 1 / 3;
	grid-template-columns: 1fr;
	place-items: center;
	transition: height .4s, border .8s;
	overflow: hidden;
	height: 0px;
}


.calzone-menu-open {
	height: 550px;
}

.h4-mostrar:before {
	color: #0d0;
	border-bottom: 2px solid #f00;
	transition: transform .3s;
}
.ver-pizza:before {
	content: 'Ver Pizzas';
}
.ocultar-pizzas > ul > li > .ver-pizza:before {
	content: 'Ocultar Pizzas';
	color: #d00;
}
.ver-hamburguesas:before {
	content: 'Ver Hamburguesas';
}
.ocultar-hamburguesas > ul > li > .ver-hamburguesas:before {
	content: 'Ocultar Hamburguesas';
	color: #d00;
}
.ver-complementos:before {
	content: 'Ver Complementos';
}
.ocultar-complementos > ul > li > .ver-complementos:before {
	content: 'Ocultar Complementos';
	color: #d00;
}
.ver-bebidas:before {
	content: 'Ver Bebidas';
}
.ocultar-bebidas > ul > li > .ver-bebidas:before {
	content: 'Ocultar Bebidas';
	color: #d00;
}
.ver-complementos:before {
	content: 'Ver Complementos';
}
.ocultar-complementos > ul > li > .ver-complementos:before {
	content: 'Ocultar Complementos';
	color: #d00;
}
.ver-especiales:before {
	content: 'Ver Especiales';
}
.ocultar-especiales > ul > li > .ver-especiales:before {
	content: 'Ocultar Especiales';
	color: #d00;
}
.abrir-pizza {
	height: calc(13.7 * 420px);
	overflow: visible;
}
.abrir-pizza-calzone {
	height: calc(15 * 420px);
}
.abrir-hamburguesas {
	height: calc(4 * 470px);
}
.abrir-complementos {
	height: calc(4 * 470px);
}
.abrir-bebidas {
	height: calc(4.3 * 470px);
	overflow: visible;
}
.abrir-especiales {
	height: calc(4.3 * 470px);
}

.h4-menu {
	font-size: 30px;
	padding: 20px 0 0px 0;
}

.h4-switch {
	background-color: #fffd;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	padding: 10px;
	width: 98%;
	color: #48e;
	border-bottom: 4px solid #48e;
	border-right: 4px solid #48e;
	transform: scale(1);
	transition: transform .3s, background .4s, color .3s;
}
.pizza {
	margin-right: -3%;
}
.calzone{
	margin-left: -3%;
}
.calzone:active, .pizza:active {
	transform: scale(.8);
}

.p-focus {
	transform: scale(.9);
	background: #999;
	color: #ddd;
}
.to-up-pizza {
	content: "s";
	background: #000d;
	position: sticky;
	top: 0%;
	grid-column: 1/3;
	padding: 10px 14px;
	border-radius: 100%;
	transition: transform .3s;
}
.to-up-pizza:active {
	transform: scale(.7);
}
.fa-angles-up {
	font-size: 30px;
}


.li-menu-item {
	background-color: #000d;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	padding: 10px;
	width: 98%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 350px;
	margin: 8px auto;
	color: #fff;
}
.calzone-item {
	min-width: 80vw;
}
.arma-tu-pizza {
	grid-column: 1 / 3;
}
.switch-food, .switch-ham, .switch-com
, .switch-beb, .switch-esp {
	grid-column: 1 / 3;
	height: 470px;
	transition: transform .4s, background .5s;
}
.switch-food:active, .switch-ham:active, .switch-com:active
, .switch-beb:active, .switch-esp:active {
	transform: scale(.9);
	background-color: #000e;
}

.menu-item-description {
	margin: 20px 0;
}

.menu-item-price::before {
	content: " ";
	font-size: 25px;
	color: #efdfaf;
	margin-top: -10px;
}

.container-menu-hamburguesas > ul > li:last-child, 
.container-menu-complementos > ul > li:last-child,
.container-menu-especial > ul > li:last-child {
	grid-column: 1 / 3;
}


.btn-ordenar-item {
	color: #fff;
	background: #f22;
	border: none;
	border-radius: 10px;
	padding: 10px 10%;
	transition: transform .3s, background .4s;
}
.btn-ordenar-item:active {
	transform: scale(.8);
}

.ico-ordenar {
	margin: 0px 10px; 
}


.close-menu {
	transform: scale(0);
	position: absolute;
}
.menu-carta-container {
	transform: scale(0);
	transition: transform .35s;
}
.menu-carta-on {
	transform: scale(1.0);
}

.btn-switch-menu {
	background: #666;
	border: none;
	padding: 20px;
	margin: 20px 10px;
	color: #fff;
	transition: transform .5s, background .3s;
}
.btn-switch-menu:active {
	background: #333;
	transform: scale(.9);
}


.btn-maps {
	color: #fff;
	border: none;
	padding: 15px;
	margin: 25px auto;
	background: #555;
	transition: transform .3s, background .2s;
}
.btn-maps:active {
	color: #ddd;
	background: #333;
	transform: scale(.8);
}

.location-container {
	margin: 35px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 4px double red;
	height: 400px;
	width: 90%
}

.location {
	width: 97%;
	height: 97%;
}



.contacto {
	color: #fff;
	padding: 20px;
	text-align: center;
	margin: 30px auto;
}
.number-phone {
	color: #48e;
	font-size: 28px;
}

footer p {
	margin: 0;
}


.ico-info {
	margin: 10px;
	font-size: 40px;
}

.pizza-time-xd {
	min-height: unset;
	gap: 20px;
	transition: height .5s;
}
.delivery-pizza-close {
	height: 100px;
	overflow: hidden;
}
.delivery-pizza-open {
	height: 250px;
}
.btn-pizza-time {
	color: #fff;
	background: #930;
	border: none;
	border-radius: 10px;
}
.animation-pulsate-pizza {
	padding: 10px;
	-webkit-animation: heartbeat 5s ease-in-out infinite both;
	animation: heartbeat 5s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.animation-click-pizza{-webkit-animation:wobble-hor-bottom .8s both;animation:wobble-hor-bottom .8s both}
@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}


.text-focus-in{-webkit-animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both;animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both}
@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}

      /* Estilo del modal */
      #modal {
        display: none; /* El modal se oculta por defecto */
        position: fixed; /* Posición fija para cubrir toda la pantalla */
        z-index: 1; /* El modal debe estar por encima de todo el contenido */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto; /* Para permitir el desplazamiento en pantallas pequeñas */
        background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro y semitransparente */
        justify-content: center;
        align-items: center;
      }
      
      /* Estilo de la imagen dentro del modal */
      #modal-imagen {
        display: block; /* Asegurar que la imagen se muestre como un bloque */
        margin: 0 auto; /* Centrar la imagen horizontalmente */
        max-width: 90%; /* Establecer el ancho máximo de la imagen */
        max-height: 80%; /* Establecer la altura máxima de la imagen */
      }
      
      /* Estilo del botón para cerrar el modal */
      .modal-cerrar {
        color: #fff; /* Color del botón */
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
      }
      
      /* Estilo del fondo difuminado */
      .modal-fondo {
        filter: blur(5px); /* Aplicar efecto de desenfoque */
        -webkit-filter: blur(5px);
        position: fixed;
        z-index: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro y semitransparente */
      }



/* Elemento base */
::-webkit-scrollbar {
  width: 8px;
}

/* Carril */
::-webkit-scrollbar-track {
  background: #29002b;
  border-radius: 50px
}
 
/* Manejador */
::-webkit-scrollbar-thumb {
  background: #7b00ff;
  border-radius: 50px;
}

/* Manejador hover */
::-webkit-scrollbar-thumb:hover {
  background: #8f51d1;
}





@media screen and (min-width: 768px) {

}

@media screen and (min-width: 1024px) {
	

	.header-menu {
		background-color: #000;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20px 10px;
	}

	.nav-header {
		display: block;
		width: 100%;
	}
	.nav-ul {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#inicio {
		margin-top: 180px;
	}



}

/*////////////////////////////////////////////////////////////////////////////*/
.carousel {
	position: relative;
	height: 400px;
}
.carousel-container {
	position: relative;
	height: 100%;
}
.carousel-anterior,
.carousel-siguiente {
	display: block;
	width: 30px;
	height: 30px;
	border: none;
	top: calc(50% - 35px);
	line-height: 30px;
	text-align: center;
	color: #fff;
	opacity: 20;
	position: absolute;
	background: #0008;
	border-radius: 30%;
	cursor: pointer;
}
.carousel-anterior {
	z-index: 10;
	top: 40%;
}
.carousel-siguiente {
	right: 0;
	top: 40%;
}

.carousel-list {
	display: flex;
	height: 80%;
}
.carousel-item {
	margin: 2px 10px;
	display: flex;
	flex-direction: column;
}
.carousel-item > img {
	height: 100%;
}
.carousel-text {
	background: #000a
}
/*////////////////////////////////////////////////////////////////////////////*/




/*Loading animation*/
.close-anim {
	background: #0000;
	transform: translateY(100vh);
}.close-anim > .center {
	background: #0000;
}
.loading-anim {
	background: #000;
	position: fixed;
	z-index: 100;
	width: 100vw;
	transition: transform .5s, background .6s;
}
.center {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0008;
	transition: background .6s;
  }
  .wave {
	width: 5px;
	height: 100px;
	background: linear-gradient(45deg, cyan, #fff);
	margin: 10px;
	animation: wave 1s linear infinite;
	border-radius: 20px;
  }
  .wave:nth-child(2) {
	animation-delay: 0.1s;
  }
  .wave:nth-child(3) {
	animation-delay: 0.2s;
  }
  .wave:nth-child(4) {
	animation-delay: 0.3s;
  }
  .wave:nth-child(5) {
	animation-delay: 0.4s;
  }
  .wave:nth-child(6) {
	animation-delay: 0.5s;
  }
  .wave:nth-child(7) {
	animation-delay: 0.6s;
  }
  .wave:nth-child(8) {
	animation-delay: 0.7s;
  }
  .wave:nth-child(9) {
	animation-delay: 0.8s;
  }
  .wave:nth-child(10) {
	animation-delay: 0.9s;
  }
  
  @keyframes wave {
	0% {
	  transform: scale(0);
	}
	50% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(0);
	}
  }
  /*Loading animation*/

/*Modal style*/
.modal-container {
	background: #0008;
	position: fixed;
	height: 100vh;
	width: 100vw;
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity .6s;
	opacity: 0;
}
.modal-on {
	opacity: 1;
}
.img-modal-container {
	max-height: 50%;
	max-width: 90%;
}
.modal-img {
	transition: transform .5s;
	transform: scale(0)
}
.modal-img-on {
	transform: scale(1);
}
/*Modal style*/

















/* Price */

/* pizza */
.calzone-price::before {
	content: "$150";
}
.pizza-price-gd::before {
	content: "GD $170";
}
.pizza-price-med::before {
	content: "MED $150";
}
.pizza-price-ch::before {
	content: "CH $110";
}

.pizza-price-pepperoni-gd::before,
.pizza-price-jamon-gd::before {
	content: "GD $140";
}
.pizza-price-pepperoni-med::before,
.pizza-price-jamon-med::before {
	content: "MED $125";
}
.pizza-price-pepperoni-ch::before,
.pizza-price-jamon-ch::before {
	content: "CH $95";
}

.pizza-price-hawaiana-gd::before {
	content: "GD $150";
}
.pizza-price-hawaiana-med::before {
	content: "MED $135";
}
.pizza-price-hawaiana-ch::before {
	content: "CH $100";
}

.pizza-price-pollo-gd::before {
	content: "GD $165";
}
.pizza-price-pollo-med::before {
	content: "MED $150";
}
.pizza-price-pollo-ch::before {
	content: "CH $110";
}

/* pizza */

.hamburguesa-res-price::before {
	content: "$45";
}
.hamburguesa-pollo-price::before {
	content: "$45";
}
.estilo-suizo-price::before {
	content: "$60";
}
.hamburguesa-hawaiana-price::before {
	content: "$55";
}
.hamburguesa-doble-price::before {
	content: "$55";
}

.nuggets-price:before {
	content: "$60";
}
.wings-price:before {
	content: "$60";
}
.aros-price:before {
	content: "$55";
}
.fries-price:before {
	content: "$40";
}
.nugget-fries-price:before {
	content: "$55";
}

.coca-cola-600-price:before {
	content: "$20";
}
.jarritos-600-price:before {
	content: "$20";
}
.boing-price:before {
	content: "$15";
}
.coca-cola-2lts-price:before {
	content: "$42";
}
.jarritos-2lts-price:before {
	content: "$38";
}
.cafe-colombia-price:before {
	content: "$";
}

.sub-price:before {
	content: "$60";
}
.sub-italiano-price:before {
	content: "$60";
}
.hot-dog-price:before {
	content: "$30";
}
.hot-dog-toc-price:before {
	content: "$35";
}
.cheesesteak-price:before {
	content: "$60";
}
/* Price */