/**
 * ##############################################################################################
 * ajustes finales 12/12/2023
 * ##############################################################################################
 */
      .namePlatForm{
      	
      	  font-family: "Lobster", Sans-serif;
          text-shadow: 2px 2px 2px rgba(255,74,74,0.38), 5px 3px 16px #FFFFFF;
          -webkit-text-stroke: 1px white;
          font-size: 50px;
         }

      .font2em{
      font-size: 1.5em;
      }

      #close {
        font-size:18px;
        color:red;
      }

      body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(https://www.gob.mx/cms/uploads/article/main_image/89882/Flor_de_Nochebuena.jpg) center center / cover no-repeat;
        opacity: 0.5; /* Ajusta la transparencia según sea necesario */
        z-index: -1; /* Coloca el elemento por detrás de otros elementos */
      }

      #boxlogo{
        position: absolute;
        top:-130px;
        margin-top: 190px;
        margin-left: 80px;
        width: 100px;
        /*background-color:black;*/
        z-index: 1;
       }

       /*contiene una caja donde esta contenido los botones de acceso a linkedin y las categorias*/
      
      .page-heading{
         margin-top:15px;
         /*background: green;*/ 
         width:600px;
         height: 50px;
         margin-left:0px;
         color:black;   
        }
      

      .tiendaname{
        position: absolute;
        top:-80px;
        width: 600px;
        margin-left: 250px;
        padding-left: 10px;
        
        color:white;
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        background-color: red;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        z-index: 2;
      }
  
     .alig_derecha{
      top:150px;
      position: absolute;
      right: 15px;
      /*background-color: orange;*/
      
      /*margin-right: 150px;*/
      width:220px;
      height: 80px;
      z-index: 1000;
      }


      /*
      @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
      darkslategray
      */

     footer {     
        position: static;
        padding: 8px;
        background-color: black ; 
        width: auto;
        height: 120px;
        bottom: 0px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: .9em;
       }

      footer p{
        color: white;
        bottom: 0px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: .9em;
      }

       .slogan{
      position: relative;
      padding-top: 10px;
      font-family: 'Dancing Script', cursive;
      font-size: 2.3em; 
      color:coral;
      font-weight: 400;
      }



/* -------------------contenedor de los exhibidores ---------------  */

        #product-grid{
        	 width: 1100px;
        	 background-color: beige;
        }

        .tam-adaptable{
        	width:600px;
        }

        #baner{
          background: black; 
        }

        .product-titulo{
          width: 180px;
          font-size: 12px;
          background: black;
          padding-top: 3px;
          padding-bottom: 3px; 
          color:white;
          text-align: left;
        }

    /* #################################################################################################################
       #
       # Automatiza la función que desaparece el botón de compra en la interfase principal
       # y activa el mouse over del botón
       #
       */

        .product-item{
              position: relative;
             width:200px;
             height:310px;
             /*background-color: red;*/
         }

    
     /* pone una imagen con motivo navideño para temporada de navidad
      * ##############################################################
      */
       .product-item .navidad{
            position: absolute;
            top: -10px;
            right: -15px;
            width: 100px;
            height: 100px;
            /*background-color: green; */
            background-image: url('../../img/esquina_navidad.png'); /* Reemplaza 'tu-imagen.png' con la ruta de tu imagen PNG */
            /*background-size: cover;*/ /* Ajusta el tamaño de la imagen para cubrir completamente el contenedor */
            background-size: 70px;
            background-repeat: no-repeat;
            background-position: top right; 
            z-index: 2;
       }

   
        .product-img {
          position: relative;
          width:180px;
          z-index: 0;
        }

        .product-image {
          position: relative;
          width: 180px; /* Puedes ajustar el ancho deseado */
          height: %; /* Puedes ajustar la altura deseada */
          overflow: hidden;
          border: 1px solid #ccc; /* Puedes agregar un borde si lo deseas */
       }

        .product-img {
        width: 180px; /* Ajusta según tu necesidad */
        height: auto; /* Ajusta según tu necesidad */
        }

       .mensajeOver {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        transform: translate(-50%, -50%);
        
        background-color: rgba(243, 232, 166, 0.8); /**/ /* Fondo semi-transparente para mayor legibilidad */
        padding: 10px;
        border: 1px solid #ccc;
        display: none;
        font-size: .6em;
        color:black;
    }

    label{
      position: absolute;
      left:-200;
      background-color:green;
    }

    .red{
      color:rgb(148,10,10);  /*red;  */
    }

    .triangulo_top_right {
       position: absolute;
       top:-3px;
       left:90px;
       width: 0;
       height: 0;
       border-top: 100px solid red; 
       border-left: 100px solid transparent;      
      }
    
    .triangulo_top_right .superoferta{
      position: absolute;
      top:-80px;
      left:-105px;
      transform: rotate(45deg);
      color:white;
      font-size: 14px;
    }

    .ocultarbtn{
        opacity: 0;
    }

    /* END funcionamiento del exhibidor
       ##########################################################################################################
     */

    .product-boton{
       position: relative;
       width: 180px;
       /*background:  rgba(141, 102, 45, 1);*/
       z-index: 12;
    }

    .product-code{
      display: none;
      position: relative;
      width: 180px;
      background: red;
      color:yellow; 
      z-index: 12;
    }

    .product-price{
      position: relative;
      width: 180px;
      height: 30px;
      font-size: 18px;
      background: yellow;
      color:red; 
      z-index: 12;
    }

    .product-price-descuento{
      font-size: 12px;
      color:black;
      text-decoration:line-through;
    }

    .desc{
      font-size: 12px;
      color:black;
    }

    .entregadias{
      position: relative;
      font-size: 8px;
      width: 160px;
      padding-bottom: 3px; 
      background: white;
      font-weight: bold;
      color:green;
    }

/* ---------------------------------------------------------------- */

/* ##################################################################################################################### 
*
*  MENU-LIST es el div que despliega la información del carro de compra y los datos del comprador
*  el comprador no requiere registrarse previamente (todos los pagos por seguridad se realizan via deposito bancario)
*
* ######################################################################################################################
*/

/*#F0D6F4*/
div.menu-list {
    
    position: absolute;
    background: pink;/*#f5ebe0;*/
    top: 0px;
    left: -200px;
    height: auto;
    transition: 0.7s;
    width: 300px; /*220*/
    opacity:0.9;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 650;
}

 div.row2{
  background: yellow !important;
     margin: 15px 0px;
     display: flex;
 }




#expand-menu {
  display:inline-block;
  cursor:pointer;
}

#close {
  top:10px;
  margin:10px;
  float:right;
  display:inline-block
  cursor:pointer; 
  color:#FFF;
    font-size: 16px;
    opacity: 0.5;
}

.menu-list ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    clear: both;
}

.menu-links {
  padding: 10px;
  background:#c781d0;
  margin-bottom:1px;
  cursor:pointer;   
  color: #FFF;
}

.menu-link-target{
  top:5px;
    position: absolute;
    left: 0px;
    transition: 0.7s;
  padding:20px;
  width:400px;
  height:300px;
}

.menu-link-target p{
  margin-bottom:60px;
}

/*este div es oculto hasta que se muestre dinámicamente*/
#x-modal{
   display: none;
   background-color: white;
   border: 4px solid;
   width: 700px;
   height: 300px;
   border-radius: 15px;
   margin-right: auto;
   margin-left: auto;
}


.texto-flotar{
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  text-align: justify;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.marco-modal {
  
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  text-align: justify;
  padding:30px;
  color:black;
  
}

.marco-modal p{
  font-family: 'Nunito', sans-serif;
  font-size: 1em;
  text-align: justify;
  color:black;
 
}


 
/* ##################################################################################
 * PANEL para mostrar el perfil del comerciante 
 * ################################################################################## 
 */
#panel_s, #supx {
  padding: 5px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #EEF4DC;
  border: solid 4px #c3c3c3;
  border-radius: 15px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
}


#panel_s {
  padding: 25px;
  display: none;
}

#panel_s_profile_close{
  top:10px;
  margin:10px;
  float:right;
  display:inline-block
  cursor:pointer; 
  color:black;
  font-size: 16px;
  opacity: 0.5;
}

#panel_s_profile_close:hover{
  color: #BF1414;
  cursor: pointer; 
}

.img-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: solid 3px white;
}

.profile{
  text-align: center;
  font-size: 1.5em;
  font-family: 'Nunito', sans-serif;

}

.sobremi{
   text-align: justify;
   font-size: .9em;
  font-family: 'Nunito', sans-serif;
}

.showvendedor{
  font-size: .8em !important;
}

.icon-bar{
  font-size: 20px;
}


/* MINI PROFILE  */

.chip {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
  position:fixed;
  bottom: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  z-index: 10;
}

.chip img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: hand ;
}

/* ############################################## DATOS DEL COMERCIANTE ###############################################################################*/

.normal{
 font-family: 'Nunito', sans-serif;
}

.modal-lg{
   max-width: 960px !important;
   background-color: green !important;
}

.text-min{
  font-size:.9em;
  color:#00468c;
}

.modal-body p{
  color:#00468c !important;
}

/* ######################## menu dinamico superior ################################### */


#baner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: 3A4FA7;
  padding: 10px;
  height: 120px;
  text-align: center;
  padding-top: 1px; 
}

.subbaner{
    position: relative; 
    margin-top: 120px;
    width: 220px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
   
    background: rgb(43,49,197);
    background: linear-gradient(0deg, rgba(49,69,197,1) 10%, rgba(24,13,130,1) 100%);

    height: 120px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    }

#divFijoRun {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1E5F88;
  height: 58px;
  padding: 10px;
  /*display: none;*/             /* El div estará oculto al principio */
  color:white;
}

/* #################################################### */
/* Estilos para el menú */

.menu {
  position: fixed;
  top: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*background-color: #333;*/
  text-align: center;
}

.menu li {
  
  display: inline-block;
  border-color:#e57600;
  border-width:2px 2px 2px 2px;
  border-style:solid;
  border-radius:5px;
  
}

.menu li a {

  display: block;
  color: white;
  padding: 5px 12px;
  text-decoration: none;

}

.menu li a:hover {
  background-color: #95B1C0;
}


/* ######################## menu dinamico superior ################################### */


/* CART ITEM */



div#empty-cart {
  padding: 15px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}

#cart-icon-container {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #8cc152;
}

#floating-cart-container {
  position: fixed;
  top: 50%;
  right: 0px;
  cursor: pointer;
  width: 80px;
  height: 80px;
}

#cart-icon {
  margin-top: 15px;
  margin-left: 22px;
}

div#tot {
  display: none;
}

div#count {
  position: relative;
  font-size: 0.8em;
}

#shopping-cart {
  display: block;
  font-size: 0.9em;
  height: auto;
  margin: 20px 40px !important;
  width: 85%;
}

strong#totamt {
  margin-left: 180px;
}

input.quantity {
  width: 40px;
}

div#count {
  margin-left: 36px;
  margin-top: 4px;
  color: #ffffff;
}

div#tot {
  background-color: #8080801c;
  padding-bottom: 12px;
  padding-top: 12px;
}

div#txt-heading {
  margin-top: 0px;
  background-color: rgba(224, 224, 224, 1);
  height: 37px;
}

#cart-heading {
  padding: 10px 15px;
  display: inline-block;
}

div#carttable {
  margin-top: 5px;
}

#btnEmpty {
  color: #d00000;
  cursor: pointer;
}

div#close {
  position: relative;
  bottom: 68px;
  right: 10px;
  cursor: pointer;
  float: right;
  padding: 6px -3px -1px 6px;
  padding-bottom: -7px;
}

#cart-item{
  background: beige !important;
}

th{
  font-weight: bold;
  color:red;
}

img.cart-item-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: #E0E0E0 1px solid;
  padding: 5px;
  vertical-align: middle;
  margin-right: 15px;
}



/*##################*/








/* ################################################################################################################# */
@media screen and (max-width: 800px) {
     

     
     body{
    	/*background: #F7F7F7;*/

     }
     
     footer {     
        position:relative;
        padding: 8px;
        background-color: darkslategray; 
        width: auto;
        height: 200px;
        bottom: 0px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: .9em;
     }

  	 h1{
  	     font-size:1.2em;
  	     color:yellow;
  	 }
  	 
  	 .namePlatForm{
	    font-family: "Lobster", Sans-serif;
        text-shadow: 2px 2px 2px rgba(255,74,74,0.38), 5px 3px 16px #FFFFFF;
        -webkit-text-stroke: 1px white;
        font-size: 36px;
     }
     
     #baner{
        	background: black; 
     }
    
      .alig_derecha{
          top:40px;
  	  float:left;
  	 /* background: yellow;*/
  	  margin-left:20px;
  	  width:300px;
  	 }  
     
     /* ######## LOGIN DE LINKEDIN ########## */
     
     .page-heading{
         margin-top:100px;
        /* background: red; */
         max-width:400px !important;
         margin-left:-10px;
         color:white;
         
     }
     
     /* ##################################### */
     
     .product-gallery p{
         max-width:300px;
         background: black;
         colo:yellow;
     }
     
     #product-grid{
         /* background:green; */
          max-width:100%;
          margin-left:-1px;
     }
     
      #product-grid p{
          color:white;
      }
     

    /** 
     * #####################################################################################################
     *
     * EXHIBIDOR: dispositivos
     * 
     * #####################################################################################################
     */
     .product-item{

         width:320px;
     }
     

     .product-item img{
         width:300px;         
     }

         
    /*### MODAL MUESTRA PRODUCTO ######*/     
    #ShowProduct{
        /* background: pink; */
         width:360px;
         padding:5px;
    } 
    
    #ShowProduct img{
         width:270px;
         padding:5px;
    }    
    /*#################################*/ 
	  
	
  	.billing-details{
  	     width:300px;
  	}
  	
      #shopping-cart{}
      .payment-details{}
  	  
  	  
  	  
  	.tam-adaptable{
  	 width:260px;
  	}


	    
}

/* ############# end dispositivos moviles ###################################################################### */