@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Irish+Grover&family=Yuji+Mai&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

:root {
  --primary-color: #fec20a;
  --alt-color: #fff;
  --bg-color: #f1ead0;
  --bg-content: #253B7A;
  --bg-color2: #F27022;
}

body {
  font-family: "Archivo Black", sans-serif;
  background-color: var(--bg-color);
}

.wrapper {
  width: 100vw;
  overflow: hidden;
  background-color: var(--bg-color);
}

.vector {
  width: 100%;
  height: 100%;
}

/* ======= NAVBAR ======= */

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 4px;
}

.brand {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--primary-color);
  font-family: 'Montserrat', sans-serif;
}

.brand span {
  color: var(--alt-color);
}

.mobile-brand {
  background-color: var(--bg-color);
  padding: 5px 20px;
}

.fa-bars {
  font-size: 1.8em;
  cursor: pointer;
  margin-top: 21px;
  margin-right: 5px;
}

.icononav{
  width: 200px;
  display: flex;
  justify-content: left;
}

/* ======= MENU ======= */

.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  background-color: var(--primary-color);
  height: 100vh;
  z-index: 10000;
  transform: translateX(-100%);
  transition: all 0.5s ease-in-out;
}

.show-menu {
  transform: translateX(0%);
}

.menu__links {
  list-style: none;
  margin-bottom: 3em;
}

.menu__item {
  font-size: 1.5em;
  color: var(--bg-color);
  padding: 1em;
  cursor: pointer;
  text-decoration: none;
}

.menu__item--active {
  color: var(--alt-color);
}

/* ======= MAIN ======= */

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 2em;
  margin-top: -5em;
}

.main-img {
  width: 30%;
  max-width: 30%;
  margin: 0 auto;
  z-index: 0;
  animation-name: img-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes img-animation {
  from {
    transform: scale(1.2);
  }

  to {
    transform: scale(1.1);
  }
}

.content-info__subtitle {
  font-size: 2.5em;
  color: var(--primary-color);
  font-weight: bold;
}

.content-info__title {
  font-family: 'Montserrat', sans-serif;
  color: var(--alt-color);
  font-size: 2em; 
  color: #000;
}

.content-info__text {
  color: #253B7A;
  font-size: 1.1em;
  margin: .3em 0em .7em;
}

.content-info__button {
  background-color: var(--primary-color);
  color: var(--bg-color);
  padding: 10px 20px;
  font-size: 1.2em;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

.content-info__button:hover {
  background-color: var(--alt-color);
  color: var(--primary-color);
}


/* ======= SOTIAL NETWORK ======= */

.sotial-network {
  width: 100vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: -2em;
}

.fa-brands {
  font-size: 2em;
  color: var(--primary-color);
  margin: 0 .2em;
  margin-top: -2em;
}

.fa-brands:hover {
  color: var(--alt-color);
}

@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
    align-items: center;
  }

  .brand {
    margin-left: 2em;
  }

  .main-img {
    width: 50%;
  }

  .conten-info {
    padding: 2em;
    width: 40%;
  }

  .conten-info__title {
    font-size: 2.5em;
  }

  .conten-info__text {
    font-size: 1em;
  }


}







.informacion{
  margin:60px 0; 
  background-color: var(--bg-content); 
}

.contenedor{
  width: 90%;
  max-width: 100%;
  overflow: hidden;
  margin: auto;
}

.contenido-cajas{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tarjeta{
  width: 30%;
  text-align: center;
  border-right: 2px solid var(--bg-color2);
  margin-bottom: 10px;
  padding: 15px;
  color: var(--bg-color);
}

.combos{
  width: 25%;
}

.tarjeta h3{
  font-size: 15px;
}

.tarjeta:last-child {
  border-right: none; 
}

.imagen-tarjeta{
  width: 60px;
  border-radius: 50%;
}
.btn-combo1{
  display: none;
}
@media screen and (max-width: 600px) {
 .tarjeta{
  width: 50%;
  border-right: none;
 }

 .combos{
  width: 50%;
}

.slidepromos{
  /*margin: 6rem 12rem;*/
  height: 20rem;
  width: 100%;
  background-size: 100% 100%;
  /*box-shadow: 20px 20px 10px grey;*/
  /*animation: slider 35s linear infinite;*/
  animation: slider 60s linear infinite;
}

@keyframes slider {
  0% {
    background-image: url(./images/combogaseosa.jpeg); /* Inicia con la primera imagen */
  }
  15% {
    background-image: url(./images/combogaseosa.jpeg); /* Mantiene la primera imagen hasta el 15% */
  }
  20% {
    background-image: url(./images/combogaseosa.jpeg); /* Transición a la segunda imagen */
  }
  40% {
    background-image: url(./images/combogaseosa.jpeg); /* Mantiene la segunda imagen hasta el 40% */
  }
  45% {
    background-image: url(./images/combogaseosa.jpeg); /* Transición a la tercera imagen */
  }
  65% {
    background-image: url(./images/combogaseosa.jpeg); /* Mantiene la tercera imagen hasta el 65% */
  }
  70% {
    background-image: url(./images/combogaseosa.jpeg); /* Transición a la cuarta imagen */
  }
  90% {
    background-image: url(./images/combogaseosa.jpeg); /* Mantiene la cuarta imagen hasta el 90% */
  }
  95% {
    background-image: url(./images/combogaseosa.jpeg); /* Transición a la quinta imagen */
  }
  97%{
    background-image: url(./images/combogaseosa.jpeg);
  }
  100% {
    background-image: url(./images/combogaseosa.jpeg); /* Vuelve a la primera imagen para un ciclo suave */
  }
}

}



.seccion_menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    padding: 30px;
    
}

.menu_burger {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 20px;
    /*flex-wrap: wrap;*/ /* Permite que los botones se adapten a la pantalla */
    margin-top: 20px;
}

.menu-btn {
    padding: 0px 6px;
    background-color: transparent;
    color: black;
    border: 2px solid var(--bg-color2);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    flex: 1 1 calc(25% - 10px); /* Distribuye los botones en una fila y ajusta el espacio */
    max-width: 200px;
    font-family: "Archivo Black", sans-serif;
    /*font-size: small;*/
}

.subtitlemenu{
  font-size: 12px;
}

.menu-btn:hover {
    background-color: var(--bg-color2);
}

.menu-btn.active {
    background-color: var(--bg-color2);
    outline: 2px solid var(--bg-color2);
    color: var(--bg-content);
}



.tab-content {
  margin-top: 2rem;
}

.tab-pane {
  display: none;
}

.tab-pane.show {
  display: block;
}

.tab-pane.active {
  display: block;
}

/* Estilos del carrusel */
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1320px;
  margin: auto;
}

.carousel {
  display: flex;
  overflow-x: auto; /* Permitir desplazamiento horizontal */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  width: 100%;
  scrollbar-width: none; /* Firefox */
  height: 400px;
}

.carousel::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Botones del carrusel */
.carousel-btn {
  background-color: transparent; 
  border: none;
  width: 25px;
  height: 25px;
  background-size: cover; /* Asegurar que la imagen cubra todo el botón */
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none; /* Ocultar los botones en pantallas pequeñas */
}

.left-btn {
  left: -60px; 
  background-image: url('./flecha.png'); 
}

.right-btn {
  right: -60px; 
  background-image: url('./flecha.png'); 
  transform: translateY(-50%) rotate(180deg);
}

.card {
  display: -ms-flexbox;
  scroll-snap-align: start;
  background-color: var(--bg-content);
  color: #000000;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  width: 250px;
  position: relative;
  height: 300px;
  margin-top: 25px;
}

.image-container {
  display: flex;
  justify-content: center;
  margin: auto;
  width: 90%;
  height: 130px;
  overflow: visible; /* Permitimos que la imagen sobresalga */
  position: relative;
  top: -40px; /* Ajustamos la posición para sobresalir */
  z-index: 1;
  border-radius: 10%;
  border: 2px solid #fff;
  overflow: hidden;
}

.image-container img {
width: 100%;

object-fit: cover;
border-radius: 10%;
}

.content-container {
  text-align: center;
  color: var(--bg-color2);
  margin-bottom: 20px;
}

.name {
  font-size: 1.5rem;
  margin: 0;
}

.description {
  font-size: 1rem;
  color: var(--bg-color);
  margin: 10px auto;
  width: 80%;
}

.price-container {
  background-color: var(--bg-color2);
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: -20px; /* Ajustamos la posición para sobresalir del card */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.price {
  font-family: "Irish Grover", system-ui;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--bg-color);
}

/* Carrusel en modo escritorio */
@media (min-width: 868px) {
  .carousel {
      display: flex;
  }

  .carousel-btn {
      display: block; /* Mostrar los botones en pantallas grandes */
  }
}

/* Carrusel en modo móvil */
@media (max-width: 1485px) {
  .carousel {
      display: block;
      overflow-x: inherit;
      height: 100%;
  }

  .card {
    
      max-width: 100%;
      margin: 65px 0;
  }

  .carousel-container {
      flex-direction: column;
      align-items: center;
  }
  .carousel-btn {
    display: none; /* Mostrar los botones en pantallas grandes */
}
  .description{
    margin: 1px auto;
    width: 90%;
  }
  .price-container{
    bottom: -28px;
  }
}


/*BOTON FLOTANTE*/
/* Estilo del botón flotante */
.floating-btn {
  background-color: var(--bg-content);
  background-image: url(./carrito.png);
  background-repeat: space;
  background-position-x: left;
  background-position: bottom;
  background-size: cover;
  background-repeat: space;
  background-position: top 6px left 10.5px;
  background-attachment: scroll;
  background-size: 44px;
  border-radius: 100%;
  border-width: 0px;
  overflow: hidden;
  outline: none;
  height: 65px;
  width: 65px;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
  margin-right: 10px;
  z-index: 1000;
  border: 1px solid #fff;
}

.buttonFloatingNumber{   
  font-family: 'abhaya';
  font-style: normal;
  font-size: 18pt;
  position: absolute;
  top: 21px;
  left: 27px;
  margin: 0 auto;
  color: var(--bg-color);
  user-select: none;  
  z-index: 1;
}

.floating-btn img {
  width: 45px;
  height: 45px;
}

/* Estilo del overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s;
}

.overlay.open {
  visibility: visible;
  opacity: 1;
}

/* Estilo del carrito de compras */
.shopping-cart {
  /*width: 300px;*/
  max-width: 90%;
  /*height: 580px;*/
  background-color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--bg-color2);
  color: white;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}

.cart-items {
  flex: 1;
  /*padding: 1rem;*/
  overflow-y: auto;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  font-size: 23px
}

.cart-footer {
  padding: 1rem;
  background-color: #f8f9fa;
  display: flex;
  justify-content: center;
}

.checkout-btn {
  background-color: transparent;
  color: #000;
  border: 2px solid #000;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.checkout-btn:hover{
  background-color: var(--primary-color);
  border: none;
}

a{
  text-decoration: none;
}



/* Estilo de la tabla dentro del carrito */
.cart-items table {
  width: 100%;
  border-collapse: collapse;
}

.cart-items th, .cart-items td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.cart-items th {
  background-color: #f8f9fa;
}

.delete-button {
  background: none;
  border: none;
  color: red;
  cursor: pointer;
  font-size: 18px;
}

/* Estilo de la alerta */
.alert-card {
  position: fixed;
  bottom: 25px;
  right: -300px; /* Oculto fuera de la pantalla */
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.alert-card-error {
  position: fixed;
  bottom: 25px;
  right: -300px; /* Oculto fuera de la pantalla */
  background-color: #ff0000;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.alert-card.show {
  right: 70px; /* Visible en la pantalla */
  opacity: 1;
}

.alert-card-error.show {
  right: 70px; /* Visible en la pantalla */
  opacity: 1;
}

/* Estilo de la tabla dentro del carrito */
.cart-items table {
  width: 100%;
  border-collapse: collapse;
}

.cart-items th, .cart-items td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.cart-items th {
  background-color: #f8f9fa;
}

.delete-button {
  background: none;
  border: none;
  color: red;
  cursor: pointer;
  font-size: 18px;
}

/* Animaciones de entrada y salida */
@keyframes slideIn {
  from {
      right: -300px;
      opacity: 0;
  }
  to {
      right: 20px;
      opacity: 1;
  }
}

@keyframes slideOut {
  from {
      right: 20px;
      opacity: 1;
  }
  to {
      right: -300px;
      opacity: 0;
  }
}



/*MODAL*/
/* El Modal (oculto por defecto) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Fijo en pantalla completa */
  z-index: 2000; /* Sobre otros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  overflow: auto; /* Scroll si es necesario */
  background-color: rgb(0,0,0); /* Color de fondo */
  background-color: rgba(0,0,0,0.4); /* Color de fondo con opacidad */
}

.headerModal{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-color2);
    color: white;
}
/* Contenido del Modal */
.modal-content {
  background-color: #fefefe;
  margin: 8% auto; /* 15% desde la parte superior y centrado */
  border: 1px solid #888;
  width: 400px; /* Podrías ajustar esto según sea necesario */
  height: 589px;
  top: -75px;
  right: 21px;
  position: fixed;
}

/* Botón de cierre (x) */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Estilos del carrito */
.cart-summary {
  margin-top: 20px;
}



/*FORMULARIO DEL MODAL*/
.modal-body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
 input[type="text"],
 input[type="number"],
 select {
  width: calc(100% - 70px);
  padding: 8px 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
 input[type="radio"] {
  margin-right: 10px;
}
 .radio-group {
  margin-bottom: 20px;
}
 input[type="submit"] {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 input[type="submit"]:hover {
  background: var(--primary-color);
}

.entrega{
  display: flex;
  justify-content:space-around;
}

.btn-entrega{
  padding: 20px 35px;
}

#delivery{
  display: none;
}

#boton, #boton1, #boton2 ,#boton3{
  background-color: white;
  color: black;
  border: 1px solid #ccc0c0;
  border-radius: 5%;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.formulario__submit{
  display: flex;
  margin: auto;
  padding: 20px 30px;
  margin-top: 20px;
  background-color: var(--bg-color2);
  border: none;
  border-radius: 5%;
  font-size: 15px;
}


.formulario__submit{
  position: fixed;
  top: 550px;
  right: 120px;
}

@media screen and (min-width: 886px) {
  .vector {
    background-image: url(https://res.cloudinary.com/freelancer2222222222222222/image/upload/v1652979463/samples/Polygon_1_sy1wwl.png);
    background-repeat: no-repeat;
    background-position: top;
  }

  .menu-bar,
  .mobile-brand {
    display: none;
    background: transparent;
  }
  .menu-bar i {
    margin-top: 20px;
  }
  .menu {
    transform: translateX(0%);
    background: none;
    width: 100%;
    height: 12vh;
    padding-right: 3.5em;
  }

  .menu__content {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
  }

  .menu__item {
    color: var(--primary-color);
    font-size: 1.2em;
    padding: 1em;
  }

  .menu__item--active {
    color: var(--alt-color);
  }

  .content-info {
    padding: 2em;
  }

  .conten-info__subtitle {
    font-size: 3.5em;
  }

  .content-info__title {
    font-size: 3em;
  }

  .sotial-network {
    justify-content: flex-start;
    margin-left: 4.4em;
  }

  .fa-brands {
    color: var(--bg-color);
  }

  .fa-solid {
    color: #f8f9fa;
   
  }
 

  .shopping-cart {
    width: 651px;
    max-width: 90%;
    height: 800px;
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    right: 17px;
  }

  
}


/*****************************UBICACION ********************************/
.ubicacionMain{
  height: 100%;
  margin-bottom: 35px;
}

.ubicacion{
  width: 100%;
  height: 150px;
  background-color: var(--bg-color2);

}

.ubicacion .title{
  display: flex;
  margin: auto;
  height: 100%;
}

.ubicacion .title h1{
  margin: auto;
}


/*****************************fin UBICACION ****************************/




/* Medios de comunicación */
@media (max-width: 768px) {
  .shopping-cart {
      width: 100%;
      right: -100%; /* Oculto fuera de la pantalla */
      height: 550px;
  }

  .overlay.open .shopping-cart {
      right: 0; /* Mover dentro de la pantalla */
  }

  .modal-content{
    width: 90%;
    top: 75px;
    height: 550px;
  }

  .formulario__submit{
    top: 600px;
  }
}


/*:::::Pie de Pagina*/
.pie-pagina{
  width: 100%;
  background-color: var(--bg-color);
  border-top: 2px solid var(--bg-color2);
}

.pie-pagina .grupo-1{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:50px;
  padding: 45px 0px;
}

.pie-pagina .grupo-1 .box figure{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie-pagina .grupo-1 .box figure img{
  width: 250px; 
}

.pie-pagina .grupo-1 .box h2{
  color: #070707;
  margin-bottom: 25px;
  font-size: 20px;
}
.pie-pagina .grupo-1 .box p{
  color: #020202;
  margin-bottom: 10px;
}

.pie-pagina .grupo-1 .red-social a{
  display: inline-block;
  text-decoration: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  margin-right: 10px;
  background-color: var(--bg-color);
  text-align: center;
  transition: all 300ms ease;
}
.pie-pagina .grupo-1 .red-social a:hover{
  color: var(--primary-color);
}
.pie-pagina .grupo-2{
  background-color: var(--bg-color2);
  padding: 15px 10px;
  text-align: center;
  color: var(--bg-content);
}
.pie-pagina .grupo-2 small{
  font-size: 15px;
}
@media screen and (max-width:800px){
  .pie-pagina .grupo-1{
      width: 90%;
      grid-template-columns: repeat(1, 1fr);
      grid-gap:30px;
      padding: 35px 0px;
  }
}




/*CARRUCEL DEL HEADER*/
.carouseles{
  width: 100vw;
  height: 100vh;
 /* margin-top: -50px;*/
  overflow: hidden;
  position: relative;
}

.carouseles .list .item{
  width: 180px;
  height: 250px;
  position: absolute;
  top: 80%;
  transform: translateY(-70%);
  left: 70%;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  background-position: 50% 50%;
  background-size: cover;
  z-index: 100;
  transition: 1s;
}

.carouseles .list .item:nth-child(1),
.carouseles .list .item:nth-child(2){
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.carouseles .list .item:nth-child(3){
  left: 67%;
}

.carouseles .list .item:nth-child(4){
  left: calc(67% + 200px);
}

.carouseles .list .item:nth-child(5){
  left: calc(67% + 400px);
}

.carouseles .list .item:nth-child(6){
  left: calc(67% + 600px);
}

.carouseles .list .item:nth-child(n+7){
  left: calc(67% + 800px);
  opacity: 0;
}





.list .item .content{
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
  width: 400px;
  text-align: left;
  color: #fff;
  display: none;
}

.list .item:nth-child(2) .content{
  display: block;
}

.content .title{
  font-size: 100px;
  text-transform: uppercase;
  color: var(--primary-color);
  font-weight: bold;
  line-height: 1;

  opacity: 0;
  animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content .name{
  font-size: 100px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1;
  opacity: 0;
  animation: animate 1s ease-in-out 0.6s 1 forwards;
}

.separador{
  width: 200px;
  display: flex;
  margin: auto;
  border: 1px solid white;
  opacity: 0;
  animation: animate 1s ease-in-out 0.6s 1 forwards;
}

.content .des{
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 28px;
  margin-left: 5px;

  opacity: 0;
  animation: animate 1s ease-in-out 0.9s 1 forwards;
}

.content .btn{
  margin-left: 5px;

  opacity: 0;
  animation: animate 1s ease-in-out 1.2s 1 forwards;
}

.content .btn button{
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border: 2px solid #fff;
}

.content .btn button:nth-child(1){
  margin-right: 15px;
}

.content .btn button:nth-child(2){
  background: transparent;
  color: #14ff72cb;
  border: 2px solid #fff;
  transition: 0.3s;
}

.content .btn button:nth-child(2):hover{
  background-color: #14ff72cb;
  color: #fff;
  border-color: #14ff72cb;
}


@keyframes animate {
  
  from{
      opacity: 0;
      transform: translate(0, 100px);
      filter: blur(33px);
  }

  to{
      opacity: 1;
      transform: translate(0);
      filter: blur(0);
  }
}

/* Carousel */






/* next prev arrows */

.arrows{
  position: absolute;
  top: 80%;
  right: 52%;
  z-index: 100;
  width: 300px;
  max-width: 30%;
  display: flex;
  gap: 10px;
  align-items: center;
}

.arrows button{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #14ff72cb;
  color: #fff;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: monospace;
  font-weight: bold;
  transition: .5s;
  cursor: pointer;
}

.arrows button:hover{
  background: #fff;
  color: #000;
}


/* time running */
.carouseles .timeRunning{
  position: absolute;
  z-index: 1000;
  width: 0%;
  height: 4px;
  background-color: #14ff72cb;
  left: 0;
  top: 0;
  animation: runningTime 7s linear 1 forwards;
}

@keyframes runningTime {
  
  from{width: 0%;}
  to{width: 100%;}

}


/* Responsive Design */

@media screen and (max-width: 999px){
  
  header{
      padding-left: 50px;
  }

  .list .item .content{
      left: 50px;
  }

  .content .title, .content .name{
      font-size: 70px;
  }

  .content .des{
      font-size: 26px;
      width: 360px;
  }

}

@media screen and (max-width: 690px){
  header nav a{
      font-size: 14px;
      margin-right: 0;
  }

  .list .item .content{
      top: 40%;
  }

  .content .title, .content .name{
      font-size: 45px;
  }

  .content .btn button{
      padding: 10px 15px;
      font-size: 14px;
  }

  .name{
    margin-bottom: 2px;
  }
}















/***************************************************************/
        
        
            /* VISTA PH */
                /* Cuando la pantalla es menor a "X" ejecuta el programa */
                    /* @media only screen and (max-width: 499px) {


                    } */


            /* VISTA PC */
                /* Cuando la pantalla es mayor a "X" ejecuta el programa */
                    /* @media only screen and (min-width: 500px) {


                                                        
                    } */



                    @font-face {
                      font-family: 'Menu';
                      font-style: normal;
                      font-weight: 2000px;
                      src: url("../fonts/Chicle-Regular.ttf") format('truetype');
                  } 
              
                  @font-face {
                      font-family: 'titles';
                      font-style: normal;
                      font-weight: 2000px;
                      src: url("../fonts/rtco-flinton-four.otf") format('truetype');
                  } 
              
                  @font-face {
                      font-family: 'fieldset';
                      font-style: normal;
                      font-weight: 2000px;
                      src: url("../fonts/ROBO.ttf") format('truetype');
                  } 
              
                  /* Scrollbar */
                      ::-webkit-scrollbar {
                          width: 3px;
                          height: 5px;
                          background-color: rgba(255, 255, 255, 0);
                      }
              
                      ::-webkit-scrollbar-thumb {
                          margin-top: 1vw;
                          margin-bottom: 1vw;
                          border-radius: 0.5rem;
                          background: #ff660e;
                      }
              
                      ::-webkit-scrollbar-track {
                          margin: 1em;
                          max-height: 2px;
                          max-width: 2px;
                      }
                      
                  /* =================================================== */
                  /* ==================== GLOBALES ===================== */
                  /* =================================================== */
              
                      *{
                          scroll-behavior: smooth;
                          margin: 0;
                          -webkit-tap-highlight-color: rgba(0,0,0,0);
                          padding: 0;
                          box-sizing: border-box;
                          touch-action: manipulation;
                          user-select: none;
              
                         /*  transition: 0.3s ease-in-out; */
                      }
              
                      #body{
                          overflow-x: hidden !important;
                          width: 100vw;
                      }
              
                      :root{
                          --colorBackground1: #faeddd;
                          --colorBackground2: #f1ead0;
                          --colorBackground3: #3c0606;
              
                          --colorText1: #5b0004; 
                          --colorText2: #3c0606;
                          --colorText3: #ff660e;
                      }
              
                      li{
                          list-style: none;
                      }
              
                      img{
                          width: 100%;
                          object-fit: contain;
                          background-color: transparent !important
                      }
              
                      area{
                          position: relative;
                          display: flex;
                          top: -4em;
                      }
              
              
              
              
              
              
              
              /* Cuando la pantalla es mayor a "X" ejecuta el programa */
              
              @media only screen and (min-width: 1150px) {
                  .loadPage{
                      width: 100% ;
                      height: 100% ;
                      display: flex;
                      position: fixed;
                      background-color: rgb(27, 0, 0);
                      z-index: 5000;
                      animation-name: lp;
                      animation-duration: 6s;
                      animation-iteration-count: 1;
                      animation-fill-mode: forwards;
                      align-content: center;
                      margin: auto auto;
                      opacity: 100%;
                      user-select: none;
                      user-zoom: none;
                      touch-action: none;
                      overflow-y: hidden ;
                      overflow-x: hidden ;
                  }
              
                  @keyframes lp {
                      0%{ background-color: rgb(27, 0, 0); opacity: 100%;}
                      40%{ background-color: rgb(27, 0, 0); opacity: 100%;}
                      80%{opacity: 100%; background-color: var(--colorBackground1);}
                      100%{opacity: 0%; background-color: var(--colorBackground1); visibility: collapse; visibility: hidden; scroll-behavior: auto; }
                  }
              
                  .logolp{
                      margin: 4rem auto;
                      position:relative;
                      z-index: 2000;
                      animation-name: logolp;
                      animation-duration: 8s;
                      animation-iteration-count: 1;
                      animation-fill-mode: both;
                      max-height: 8rem;
                  }
                  
                  @keyframes logolp {
                   0% {transform: scale(0.6,0.6); opacity: 0%;}
                   100% {transform: scale(1.1,1.1); opacity: 100%}
                  }
              }
              
              /* ======================================================================================= */
              /* ======================================================================================= */
              /* ======================================================================================= */
              
              /* Cuando la pantalla es menor a "X" ejecuta el programa */
              
              @media only screen and (max-width: 1149px) {
                  .loadPage{
                      width: 100% ;
                      height: 100% ;
                      display: flex;
                      position: fixed;
                      z-index: 2000;
                      animation-name: lp;
                      animation-duration: 6s;/* 6s */
                      animation-iteration-count: 1;
                      animation-fill-mode: forwards;
                      align-content: center;
                      margin: auto auto;
                      opacity: 100%;
                      user-select: none;
                      user-zoom: none;
                      touch-action: none;
                      scroll-behavior: none;
                      overflow: 0;
                  }
              
                  @keyframes lp {
                      0%{ background-color: rgb(27, 0, 0); opacity: 100%;}
                      40%{ background-color: rgb(27, 0, 0); opacity: 100%;}
                      80%{opacity: 100%; background-color: var(--colorBackground1);}
                      100%{opacity: 0%; background-color: var(--colorBackground1); visibility: collapse; visibility: hidden; scroll-behavior: auto; }
                  }
              
                  .logolp{
                      margin: 4rem auto;
                      position:relative;
                      z-index: 2000;
                      animation-name: logolp;
                      animation-duration: 8s;
                      animation-iteration-count: 1;
                      animation-fill-mode: both;
                      max-height: 8rem;
                      width: 38vw;
                  }
                  
                  @keyframes logolp {
                   0% {transform: scale(0.6,0.6); opacity: 0%;}
                   100% {transform: scale(1.1,1.1); opacity: 100%}
                  }
                  
              }
              
              /* ======================================================================================= */
              /* ======================================================================================= */
              /* ======================================================================================= */
              
              .loadPageKILL{
                  display: none;
              }
              
              /* ======================================================================================= */
              /* ======================================================================================= */
              /* ======================================================================================= */
              
              .listlp{
                  margin: auto auto;
                  list-style: none;
                  text-align: center;
                  position: relative;
              }
              
              /* ======================================================================================= */
              /* ======================================================================================= */
              /* ======================================================================================= */
              
              .textlp{
                  opacity: 0%;
              }
              
              
              
              
              
              
              
              
              
              
              
              
              
              
                      #imgLoadPagePreloader{
                          animation-name: background-animation-img-preloader;
                          animation-duration: 5s;/* 100s */
                          animation-fill-mode: forwards;
                          animation-iteration-count: infinite;
                          animation-direction: alternate;
                          overflow: hidden;
                          background-size: cover;
                          background-repeat: space;
                          background-position: center center;
                          background-attachment: scroll;
                          height: 1px;
                          width: 100%;
                          opacity: 1%;
                          position: absolute; 
                          /* height: 1px; 
                          width: 1px; */
                        }
                        
                          @keyframes background-animation-img-preloader {
                              0% {
                                  background-image: url(../images/data_bnr_img-PH.png);
                              }
                              5% {
                                  background-image: url(../images/burger_bnr_img_mobile.png);
                              }
                              10% {
                                  background-image: url(../images/bnr_characters_img.png);
                              }
                              15% {
                                  background-image: url(../images/img_burger.png);
                              }
                              20% {
                                  background-image: url(../images/data_bnr_img.png);
                              }
                              25% {
                                  background-image: url(../images/bnr_characters_img.png);
                              }
                              30% {
                                  background-image: url(../images/menu_title_monile.png);
                              }
                              35% {
                                  background-image: url(../images/rombos_line_mobile.png);
                              }
                              40% {
                                  background-image: url(../images/bnr_fire_img.png);
                              }
                              45% {
                                  background-image: url(../images/social_btn_menu_white.png);
                              }
                              50% {
                                  background-image: url(../images/btn_menu_burger.png);
                              }
                              60% {
                                  background-image: url(../images/btn_menu.png);
                              }
                              70% {
                                  background-image: url(../images/line_rombos.png);
                              }
                              80% {
                                  background-image: url(../images/phone_data.png);
                              }
                              90% {
                                  background-image: url(../images/logo_mobile.png);
                              }
                              100% {
                                  background-image: url(../images/ftr_hand_img.png);
                              }
                          } 
                        
                  
                  /* =================================================== */
                  /* =================== HEADER NAV MENU =============== */
                  /* =================================================== */
              
                      /* HEADER contenedor de todo el menu nav y logos */
                          .headerContainer{
                              background: var(--colorBackground1);
                              position: fixed;
                              top: 0;
                              left: 0;
                              z-index: 100;
                          }
              
              
                          /* VISTA PH */
                              /* Cuando la pantalla es menor a "X" ejecuta el programa */
                                  @media only screen and (max-width: 585px) {
              
                                      /* OCULTA LOS ESTILOS DEL HEADER PC */
                                          #headerItemsContainerPC{
                                              display: none;
                                          }
              
                                      /* NAV contenedor del nav menu PH */
                                          .headerItemsContainerPH{
                                              display: flex;
                                              flex-direction: row;
                                              flex-wrap: nowrap;
                                              align-content: center;
                                              justify-content: space-around;
                                              align-items: center;
                                              width: 100vw;
                                              position: relative;
                                              padding: 0.5em 0.5em;
                                              height: 4em;
                                          }
              
                                          /* A contenedor con las imagenes de textos PH */
                                              .headerItemA{
                                                  height: 1.65em;
                                                  display: flex;
                                                  width: 80px;
                                              }
              
                                          /* IMG contenedora de los rombos PC */
                                              .headerDecorationPC{
                                                  display: none;
                                              }    
              
                                          /* A contenedor del logo central PH */
                                              .headerItemLogo{
                                                  /* height: 6em; */ 
                                                  /* padding: 2em 1em; */
                                                  padding-bottom: 1.1em;
                                                  width: 20vw;
                                                  min-width: 8em;
                                                  max-width: 11em;
                                                  display: flex;
                                                  align-items: center;
                                                  justify-content: center;
                                                  flex-direction: column;
                                                  position: relative;
                                                  background: #faeddd;
                                                  bottom: -14px;
                                                  border-bottom-left-radius: 100%;
                                                  border-bottom-right-radius: 100%;
                                              }    
              
                                              /* IMG con el logo central PH */
                                                  .headerItemLogo img{
                                                      height: 3em;
                                                      width: 7em;
                                                      min-width: 3em;
                                                      filter: drop-shadow(0px 0px 6px rgb(0, 0, 0, 0.1));
                                                      object-fit: contain;
                                                  }
                                                
                                          /* A contenedor del BOTON de abrir menu nav PH */        
                                              .headerItemOpenNavButtonPH{
                                                  /* height: 1.5em;
                                                  width: 80px;
                                                  display: flex;
                                                  z-index: 2;
                                                  cursor: pointer;
                                                  position: relative;
                                                  right: -23px; */
              
                                                  height: 1.5em;
                                                  width: 15vw;
                                                  max-width: 80px;
                                                  display: flex;
                                                  z-index: 2;
                                                  cursor: pointer;
                                                  position: relative;
                                                  right: -3%;
                                              }
              
                                          /* UL contenedora del menu emergente de navegacion PH */    
                                              .headerItemNavMenuContainerPH{
                                                  background: #3c0606cf;
                                                  height: 17em;
                                                  width: 58.5vw;
                                                  min-width: 9em;
                                                  padding: 1.5em;
                                                  position: absolute;
                                                  right: 2%;
                                                  top: 10px;
                                                  display: flex;
                                                  flex-direction: column;
                                                  flex-wrap: nowrap;
                                                  align-content: center;
                                                  justify-content: space-between;
                                                  align-items: center;
                                                  border-radius: 10px;
                                                  z-index: 1;
                                              }
              
                                              /* A con el texto del menu emergente de PH */
                                                  .headerItemTextPH{
                                                      font-family: 'menu';
                                                      color: #faeddd;
                                                      font-weight: 100;
                                                      text-decoration: none;
                                                      font-size: 1.85em;
                                                  }
              
                                              /* A contenedor del @ de instagram */    
                                                  .headerItemInstagramPH{
                                                      height: 2em;
                                                      display: flex;
                                                      margin-top: 1.5em;
                                                  }
                                  }
              
                          /* VISTA PC */
                              /* Cuando la pantalla es mayor a "X" ejecuta el programa */
                                  @media only screen and (min-width: 586px) {
              
                                      /* OCULTA TODAS LAS VISTAS DEL HEADER DE PH */
                                          #headerItemsContainerPH{
                                              display: none;
                                          }
              
                                      /* NAV contenedor del nav menu PC */
                                          .headerItemsContainerPC{
                                              display: flex;
                                              flex-direction: row;
                                              flex-wrap: nowrap;
                                              align-content: center;
                                              justify-content: space-around;
                                              align-items: center;
                                              width: 100vw;
                                              padding: 0.5em 0.5em;
                                              height: 4em;
                                          }
              
                                          /* A contenedor con las imagenes de textos PC */
                                              .headerItemA{
                                                  height: 1.45em;
                                                  width: 80px;
                                                  display: flex;
                                                  overflow: visible;
                                              }
              
                                          /* IMG contenedora de los rombos PC */
                                              .headerDecorationPC{
                                                  width: 3em;
                                                  z-index: 1;
                                              }    
              
                                          /* A contenedor del logo central PC */
                                              .headerItemLogo{
                                                  /* height: 6em; */ 
                                                  /* padding: 2em 1em; */
                                                  padding-bottom: 1.1em;
                                                  width: 20vw;
                                                  min-width: 8em;
                                                  max-width: 11em;
                                                  display: flex;
                                                  align-items: center;
                                                  justify-content: center;
                                                  flex-direction: column;
                                                  position: relative;
                                                  background: #faeddd;
                                                  bottom: -14px;
                                                  border-bottom-left-radius: 100%;
                                                  border-bottom-right-radius: 100%;
                                              }    
              
                                              /* IMG con el logo central PC */
                                                  .headerItemLogo img{
                                                      height: 3em;
                                                      width: 7em;
                                                      min-width: 3em;
                                                      filter: drop-shadow(0px 0px 6px rgb(0, 0, 0, 0.1));
                                                      object-fit: contain;
                                                  }
                                                                      
                                  }
              
              
                  /* =================================================== */
                  /* =================== INTRODUCCION ================== */
                  /* =================================================== */
              
                      /* SECTION contenedora de los banners introductorios */            
                          .introductionSectionContainer{
                              background-color: var(--colorBackground2);
                              padding-top: 7.5em;
                              overflow: hidden;
                          }
              
              
                          /* VISTA PH */
                              /* Cuando la pantalla es menor a "X" ejecuta el programa */
                                  @media only screen and (max-width: 779px) {
              
                                      /* OCULTA TODAS LAS VISTAS DE LA INTRODUCCION PC */
                                          #introductionVectorsContainerPC{
                                              display: none;
                                          }
              
                                      /* SECTION contenedora de los banners introductorios */
                                          .introductionSectionContainer{
                                              height: 38em;
                                              /* height: 100vh; */
                                          }    
              
                                          /* ARTICLE contenedor de los vectores de introduccion PH */
                                              .introductionVectorsContainerPH{
                                                  position: relative;
                                                  display: flex;
                                                  height: auto;
                                                  flex-direction: column;
                                                  align-items: center;
                                                  justify-content: center;
                                              }
              
                                              /* IMG con los vectores de la introduccion PH */
                                                  .introductionVector1{ /* BRASAS */
                                                      margin: 0 auto;
                                                      display: flex;
                                                      z-index: 2;
                                                      position: relative;
                                                      width: 40vw;
                                                      height: 8em;
                                                      object-fit: cover;
                                                      overflow: visible;
                                                      min-width: 11em;
                                                      max-width: 13em;
                                                      /* right: -14px; */
                                                      margin-bottom: -60px;
                                                  }
              
                                                  .introductionVector2{ /* BURGER */
                                                      width: 100%;
                                                      min-width: 24em;
                                                      height: 18em;
                                                      margin: 0 auto;
                                                      display: flex;
                                                      z-index: 1;
                                                      position: absolute;
                                                      background-position: center center;
                                                      background-size: contain;
                                                      background-repeat: no-repeat;
                                                      /* left: 0; */
                                                      /* right: 0; */
                                                      bottom: -17.5em;
                                                  }
              
                                                  .introductionVector3{ /* PIBARDOS */
                                                      margin: 0 auto;
                                                      display: flex;
                                                      z-index: 2;
                                                      position: absolute;
                                                      width: 22em;
                                                      /* margin-top: -107px; */
                                                      /* left: 1.3em; */
                                                      left: 0;
                                                      bottom: -33em;
                                                      right: -15px;
                                                  }   
              
                                  }
              
              
                          /* VISTA PC */
                              /* Cuando la pantalla es mayor a "X" ejecuta el programa */
                                  @media only screen and (min-width: 780px) {
              
                                      /* OCULTA TODAS LAS VISTAS DE LA INTRODUCCION PC */
                                          #introductionVectorsContainerPH{
                                              display: none;
                                          }
              
                                      /* SECTION contenedora de los banners introductorios */
                                          .introductionSectionContainer{
                                              height: 27em;
                                          }    
              
                                          /* ARTICLE contenedor de los vectores de introduccion PC */
                                              .introductionVectorsContainerPC{
                                                  display: flex;
                                                  flex-direction: row;
                                                  align-items: center;
                                                  justify-content: center;
                                                  flex-wrap: nowrap;
                                                  align-content: center;
                                                  position: relative;
                                                  width: 100vw;
                                              }
              
                                              /* IMG con los vectores de la introduccion PC */
                                                  .introductionVector1{ /* BRASAS */
                                                      height: auto;
                                                      width: 32vw;
                                                      max-width: 15em;
                                                      min-width: 13em;
                                                      z-index: 2;
                                                      display: flex;
                                                      position: relative;
                                                      /* left: 0; */
                                                      /* right: 26px; */
                                                      filter: drop-shadow(0px 0px 6px rgb(0, 0, 0, 0.5));
                                                  }
              
                                                  .introductionVector2{ /* BURGER */
                                                      height: auto;
                                                      width: 82vw;
                                                      max-width: 35.5em;
                                                      min-width: 24em;
                                                      position: absolute;
                                                      z-index: 1;
                                                      left: -13vw;
                                                      bottom: -102%;
                                                  }
              
                                                  .introductionVector3{ /* PIBARDOS */
                                                      background-image: url(../images/bnr_fire_img.png);
                                                      background-position: 0px 60px;
                                                      background-repeat: no-repeat;
                                                      background-size: contain;
                                                      overflow: visible;
                                                      width: 74vw;
                                                      min-width: 26em;
                                                      max-width: 28em;
                                                      padding: 3em;
                                                      position: absolute;
                                                      right: -4em;
                                                      z-index: 1;
                                                      bottom: -14em;
                                                  }   
                                                                      
                                  }
/******************************************FIDELIDAD*******************************************/

                                  .fidelidad-container {
                                    max-width: 400px;
                                    margin: 20px auto;
                                    padding: 20px;
                                    background: #fff;
                                    border-radius: 12px;
                                    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                                    text-align: center;
                                    font-family: Arial, sans-serif;
                                }
                            
                                .fidelidad-container h2 {
                                    color: #333;
                                    margin-bottom: 10px;
                                }
                            
                                .fidelidad-container input {
                                    width: 100%;
                                    padding: 10px;
                                    margin-top: 10px;
                                    border: 1px solid #ccc;
                                    border-radius: 8px;
                                    font-size: 16px;
                                }
                            
                                .fidelidad-container button {
                                    margin-top: 15px;
                                    padding: 10px 20px;
                                    background: #ff5722;
                                    color: white;
                                    border: none;
                                    border-radius: 8px;
                                    cursor: pointer;
                                    font-size: 16px;
                                    transition: background 0.3s;
                                }
                            
                                .fidelidad-container button:hover {
                                    background: #e64a19;
                                }
                            
                                .cuadros {
                                    font-size: 24px;
                                    margin: 15px 0;
                                }
                            
                                .resultado p {
                                    margin: 5px 0;
                                    color: #555;
                                }
              
                  /* Fondo oscuro detrás del modal */
  .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.6);
  }

  /* Caja blanca del modal */
  .modal-content {
      background-color: #fff;
      margin: 10% auto;
      padding: 20px;
      border-radius: 12px;
      width: 90%;
      max-width: 400px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      text-align: center;
      font-family: Arial, sans-serif;
  }

  .modal-content h3 {
      margin-bottom: 10px;
      color: #333;
  }

  .modal-content input, .modal-content select {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 16px;
  }

  .modal-content button {
      margin-top: 15px;
      padding: 10px 20px;
      background: #4caf50;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s;
  }

  .modal-content button:hover {
      background: #45a049;
  }

  .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      cursor: pointer;
  }