:root{
  --color-nav:#333;
}

html{
  font-size:16px;
}

body{
  background-color: #fff;
  font-size:16px;
}

#header-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.625rem;
  font-family: "Oswald", sans-serif;
}

#header-container #logo{
  display: flex;
  flex-direction: row;
  margin-top: 0.625rem;
  justify-content: space-between;
  align-items: center;
}

.logo-text{
  margin-left: 0.625rem;
}

nav ul li{
  list-style: none;
  display: inline;
}

nav ul li a{
  font-size: 0.9375rem;
  padding: 0.9375rem;
  color: var(--color-nav);
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #e50c39;
  color: #fff;
}

.main-content h2{
  display:flex;
  justify-content:center;
  font-size:2.5rem; 
  color:#000;
  letter-spacing:2px;
  font-family: 'Oswald', sans-serif;
} 

#cart {
  display:flex;
  justify-content:end;
}

.badge:after{
  font-family: "Oswald", sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  background: red;
  border-radius: 50%;
  padding: 6px 8px;
  content:attr(value);    /*'content' aplica un contenido al elemento, y dentro de (value) va el 0*/
  left:-8px;
  top:-10px;
  opacity:0.9;
}

#subtotal{
  display: none;
  font-family: "Oswald", sans-serif;
  color: #e74c3c;
  font-weight: bold;
  font-size: 1rem;
  padding: 0px 5px;
}
 	 	
.gallery{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  font-family:"Work Sans", sans-serif;
}

.gallery li{
  display:flex;
  /* Para que las columnas tengan la misma altura.*/  
  box-sizing:border-box;
  list-style:none;
  width: calc(100% / 3);
  /* 33.33% */
  padding: 10px;
}

.gallery li .box {
  padding: 6px 6px 30px 6px;
  border: 2px solid #e1e8ee;
}

.gallery li .box img {
  width: 100%;
  /* Imagenes responsivas */
  max-width: 100%;
  /* Imagenes responsivas */
  height: auto;
  margin-bottom: 6px;
  justify-content: center;
}

.gallery li .box h3 {
  margin-bottom: 6px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 100%;
  text-transform: uppercase;
  color: #17181a;
  letter-spacing: 2px;
  height: 10vh;
}

.gallery li .box p{
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #135D76
}

.gallery li .box time {
  display: flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  color: #1a5b5e;
}

.gallery li .box .button { 
  margin-top: 5px;
  width: 100%;
  padding: 7px;
  border: none;
  background: #0D7139;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  font-family: "Work Sans", sans-serif;
}

footer {
  background-color: #f8f9fa;
  padding: 40px 20px 20px 20px;
  font-family: "Oswald", sans-serif;
  border-top: 1px solid #e1e8ee;
  margin-top: 40px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.footer-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav ul li {
 margin: 0 15px;
}

.footer-nav ul li a{
text-decoration: none;
font-size: 1rem;
}

.footer-nav ul li a{
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color:var(--color-nav);
}

.footer-nav ul li a:hover {
  color: #e50c39;
}

.footer-social{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.footer-social i{
  margin: 0 10px;
  font-size: 1.5rem;
  cursor: pointer;
  color:var(--color-nav);
}


.footer-social i:hover {
  color: #e50c39;
}

.footer-copyright{
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  padding-top: 20px;
}

@media (max-width: 960px) {

  #header-container {
    flex-direction: column;
  }

  #header-container #logo {
    display: flex;
    flex-direction: column;
  }

  .gallery {
    flex-direction: column;
    margin-top: 60px;
  }

  .gallery li {
    width: 100%;
    justify-content: center;
  }

.img-pizzas{
  width: 100%;
  /* Imagenes responsivas */
  max-width: 100%;
  /* Imagenes responsivas */
  height: auto;
}


}