/**
 * ##############################################################################################
 * 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;
    }

    .cuenta_atras {
        position: absolute;
        padding-left: 2px;
        left:1px;
        top:-85px;
        padding-top: 18px;
        background-color: rgba(100, 58, 11, 0.9);
        color: white;
        width:195px;
        height: 30px;
        font-size: .8em;
    }
    
    /*ajuste de las columnas en la cuenta regresiva*/
    .row2{
        position: absolute;
        left: -50px;
        top:-20px;
        width: 80px;
        height: 30px;
        text-align: left;
        background-color: orange;
        z-index: 10px;
    }
    
    /* los números del cronometro */
    .time {
    position: absolute;
    top:2px;
    left:-30px;
    color: white;
    font-size: .9em;
    font-weight: bold;
    background-color: red;
    width: 20px;
    }


    /* 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: 140px;
      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*/
.menu-list {
    
    position: absolute;
    background: #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;
}

#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; 
}

/*120*/
.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;
  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 ################################### */







/* ################################################################################################################# 
   #
   #
   # max-width: 800px
   #
   #
  ##################################################################################################################
*/

 @media screen and (max-width: 800px) {
     
     
     body{
         
        width:100%; 
    	background: #F7F7F7;

     }
     
      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;*/5
        opacity: 0.5; /* Ajusta la transparencia según sea necesario */
        z-index: -1; /* Coloca el elemento por detrás de otros elementos */
      }
     
     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; 
     }
    
    .sharethis-inline-share-buttons{
        
        
    }
    
    
    select
		{
		position:relative;
		top:7px;
		width: 96%;
		background: red;
		height: 40px;
	}
    
    /*-------------------------- menu de navegación de categorias      ------------------------*/
      .alig_derecha{
          position:relative;
          top:60px;
  	      background: yellow;
  	      padding:10px;
  	      margin-left:20px;
  	      width:370px;
  	      height: 60px;
  	      margin-left:10px;
  	 }  
     
     
     .phppot-container{
        /*background: blue;*/
        width:370px;
        height: 120px;
     }
    
		
     
     
     
     /* ######## LOGIN DE LINKEDIN ########## */
     .page-heading{
         margin-top:20px;
        /* background: red; */
         max-width:370px !important;
         
         color:white;
     }
     /* ##################################### */
     
     
     
     /** 
      * #####################################################################################################
      *
      * EXHIBIDOR: dispositivos
      * 1 
      * #####################################################################################################
      */
     
     /**
      * ######################################################################################################
      * ## constituye el escenario 
      * ## este div es perimetral
      * ## el delimitador principa debe ser transparente
      * 0
      */
     #product-grid{
         /*background:white;*/ 
         width:360px;
         margin-left:-20px;
     }
     
      /* que sale 1 */
    .product-titulo{
         left:-20px;
         background: black;
         color:white;
         width:140px;
    }
     
     .product-item{
         /* 2 */
         width:160px;
         background: pink;
         height:320px;
     }
     
     /* el 2 fondo de la caja del exhibidor blue cremita */
     .product-item{
       position: relative;
       width:160px;
       height:310px;
       background: #ffe599;
       margin-left:10px;
    }
    
    .product-item img{
       width:300px;         
    }

     /* 
      * imagen principal del producto: fondo interno de la imagen, el fondo debe ser transparente
      */ 
    .product-image{
        /*background:white;*/
         width:140px;
    }
    
    .navidad{
        /*background:green; gorro transparente*/
    }
    
    
    .product-price{
      position: relative;
      width: 150px;
      height: 30px;
      font-size: 18px;
      background: yellow;
      color:red; 
      z-index: 12;
    }
    
     /* evio gratis a partir 4 */
      #product-grid p{
          color:white;
          width:165px;
      }

/* ###################################################### cronometro ###############################  */      
      /* FONDO CAFE superoferta con cronometro */
    .cuenta_atras {
        position: absolute;
        padding-left: 2px;
        left:1px;
        top:-85px;
        padding-top: 18px;
        background-color: rgba(100, 58, 11, 0.9);
        color: white;
        width:155px;
        height: 30px;
        font-size: .8em;
    }
    
    /*ajuste de las columnas en la cuenta regresiva*/
    .row2{
        position: absolute;
        left: -50px;
        top:-20px;
        width: 5px;
        height: 30px;
        text-align: left;
        background-color: orange;
        z-index: 10px;
    }

    .time {
    position: absolute;
    top:2px;
    left:-30px;
    padding-left: -20px;
    color: white;
    font-size: .9em;
    font-weight: bold;
    background-color: red;
    width: 20px;
    }
/* #####################################################################################  */


    /* 5 */
    .entregadias{
      position: relative;
      font-size: 11px;
      width: 120px;
      padding-bottom: 3px; 
      background: white;
      font-weight: bold;
      color:green;
      margin-left:-50px;
    }
    
    .product-code{
      display: none;
      position: relative;
      width: 140px;
      background: yellow;
      color:yellow;
      margin-left:10px;
      z-index: 12;
    }

    /* 6 ENVIO GRATIS */
     .product-gallery p{
         width:140px;
         background: orange;
         colo:white;
     }

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

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