@charset "utf-8";
/* CSS Document */
/*
480px y 320px: Estas resoluciones son comunes en dispositivos móviles, especialmente en teléfonos más antiguos o con pantallas más pequeñas.
768px: Esta es la resolución típica para tablets en modo paisaje y dispositivos más pequeños. Es importante tener un diseño responsive que se vea bien en esta resolución.
1024px: Esta resolución es importante ya que es la utilizada en muchas tablets y dispositivos más antiguos. Asegurarse de que tu diseño se vea bien en esta resolución es crucial para una experiencia de usuario óptima.
1280px: Esta es una resolución común para pantallas de computadoras portátiles y algunos monitores de escritorio más antiguos.
1440px: Esta es una resolución comúnmente utilizada para monitores de computadora de escritorio estándar.
1600px: Aunque menos común, algunas pantallas más grandes o monitores de alta resolución pueden tener una resolución de 1600px de ancho.
1920px: Esta es una resolución muy común para monitores de escritorio y portátiles de tamaño estándar. Es la resolución "full HD".
2560px y superiores: Monitores de alta gama, monitores 2K y 4K, y pantallas de alta resolución pueden tener resoluciones de 2560px o incluso 3840px de ancho.
*/
@media screen and (max-width:2560px){
	
}

@media screen and (max-width:1920px){
	#textParticulas .span_h3 {
		position: absolute;
		top: 38%;
		left: 60.5%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 58%;
		left: 60.5%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:1700px){
	#textParticulas .span_h3 {
		position: absolute;
		top: 40%;
		left: 62%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 60%;
		left: 62%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:1559px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 20%;
		left: 49%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 2.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 27%;
		left: 49%; /* Igual que arriba */
		color: #EDA302;
		font-size: 2.4em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
}

@media screen and (max-width:1440px){
	.panel-logs-container {
	  position: absolute;
	  top: 20%;
	  bottom: 10%;
	  left: 5%;
	  z-index: 1;
	  width: 40%;
	  height: 40%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 8%;
		left: 50%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 2.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 15%;
		left: 50%; /* Igual que arriba */
		color: #EDA302;
		font-size: 2.4em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 27%;
		left: 64%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 18px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 64%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	.h5_CXP{
		font-family: OpenSans-Regular;
		font-size: 25px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFFFFF;
		text-decoration: none;
		padding: 0px;
		margin: 15px auto;
		box-sizing:border-box;
		display:block;
		position:absolute;
		top: 65%;
		right: 0%;
		bottom: 0%;
		left:10%;
		border: 0px;
	}
}


@media screen and (max-width:1280px){
	/*SE MODIFICA EL MENUSYS*/
	.mainmenu{
		width: 100%;
		padding: 0px;
		height: 100%;
		margin: 0px;
		position: relative;
		left: 30%;
		top: 30%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
	}
	/*SE MODIFICA EL MENUSYS*/
	
	.whatsapp{
		height: auto;
		width: 6%;
		margin: 0px;
		padding: 0px;
		border: thin none #000;
		position: fixed;
		left: 92%;
		top: 85%;
		right: 0px;
		bottom: 0px;
		cursor: pointer;
		box-sizing:border-box;
		display:block;
	}
	
	.tablaResponsive td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		text-align: center; /* opcional */
	}
	
	.tablaResponsive tr {
		display: block;
	}
}

@media screen and (max-width:1180px){
	#textParticulas .span_h3 {
		position: absolute;
		top: 28%;
		left: 67%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 48%;
		left: 67%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:1101px){
	#textParticulas .span_h3 {
		position: absolute;
		top: 28%;
		left: 69%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
		display:block;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 45%;
		left: 69%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	.button5{
		font-family: RobotoCondensed-Regular;
		font-size: 18px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFF;
		text-decoration: none;
		background-color: #F5982B;
		text-align: center;
		padding: 10px;
		height: auto;
		width: auto;
		margin:auto;
		border: thin solid #F5982B;
		cursor: pointer;
		box-sizing: border-box;
		display: block;
	}
}

@media screen and (max-width:1024px){
	/*MUEVE EL CONTENIDO DEL BODY*/
	.content-after-table {
    	margin-top: -50px; /* Ajusta este valor según sea necesario */
  	}
	/*MUEVE EL CONTENIDO DEL BODY*/
	
	/*SE MODIFICA EL MENUSYS*/
	.mainmenu{
		width: 100%;
		padding: 0px;
		height: 100%;
		margin: 0px;
		position: relative;
		left: 10%;
		top: 30%;
		right: 0px;
		bottom: 0px;
		box-sizing:border-box;
	}
	/*SE MODIFICA EL MENUSYS*/
	
	.whatsapp{
		height: auto;
		width: 8%;
		margin: 0px;
		padding: 0px;
		border: thin none #000;
		position: fixed;
		left: 89%;
		top: 85%;
		right: 0px;
		bottom: 0px;
		cursor: pointer;
		box-sizing:border-box;
		display:block;
	}
	
	.panel-logs-container {
		position: absolute;
		top: 15%;
		bottom: 10%;
		left: 5%;
		z-index: 1;
		width: 30%;
		height: 25%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 8%;
		left: 42%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 2.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 15%;
		left: 42%; /* Igual que arriba */
		color: #EDA302;
		font-size: 2.4em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 25%;
		left: 61%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 18px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 45%;
		left: 61%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	.tablaResponsive td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		text-align: center; /* opcional */
	}
	
	.tablaResponsive tr {
		display: block;
	}
}

@media screen and (max-width:950px){
	.panel-logs-container {
		position: absolute;
		top: 13%;
		bottom: 0%;
		left: 3%;
		z-index: 1;
		width: 30%;
		height: 25%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 5%;
		left: 40%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 2.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 12%;
		left: 40%; /* Igual que arriba */
		color: #EDA302;
		font-size: 2.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 23%;
		left: 67%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 40%;
		left: 62%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	.tablaResponsive td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		text-align: center; /* opcional */
	}
	
	.tablaResponsive tr {
		display: block;
	}
}

@media screen and (max-width:932px){
	.panel-logs-container {
		position: absolute;
		top: 8%;
		bottom: 0%;
		left: 5%;
		z-index: 1;
		width: 30%;
		height: 22%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 5%;
		left: 50%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 9%;
		left: 50%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 15%;
		left: 72%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 30%;
		left: 72%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:900px){
	.panel-logs-container {
		  position: absolute;
		  top: 15%;
		  bottom: 0%;
		  left: 3%;
		  z-index: 1;
		  width: 30%;
		  height: 23%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 5%;
		left: 42%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 9%;
		left: 42%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 18%;
		left: 65%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 38%;
		left: 65%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:896px){
	.panel-logs-container {
		position: absolute;
		top: 7%;
		bottom: 0%;
		left: 8%;
		z-index: 1;
		width: 29%;
		height: 20%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 3%;
		left: 45%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 7%;
		left: 45%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 13%;
		left: 67%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 28%;
		left: 67%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:854px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 3%;
		left: 44%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 6%;
		left: 44%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 13%;
		left: 68%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 28%;
		left: 68%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:844px){
	
	.panel-logs-container {
		display:none;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 3%;
		left: 8%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 2em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 8%;
		left: 8%; /* Igual que arriba */
		color: #EDA302;
		font-size: 2em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 17%;
		left: 32%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.7em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 28%;
		left: 32%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:820px){
	.panel-logs-container {
		  position: absolute;
		  top: 10%;
		  bottom: 10%;
		  left: 2%;
		  z-index: 1;
		  width: 32%;
		  height: 20%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 5%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 2em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 10%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.9em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 18%;
		left: 36%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 18px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 37%;
		left: 30%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas {
		position: relative;
		width: 100%;
		height: 850px;
		z-index: 1;
	}
	
	.imagenRezice{
		margin: 0px;
		padding: 0px;
		height: auto;
		width: 100%;
		display:block;
		box-sizing:border-box;
	}
	
	.h5_CXP{
		font-family: OpenSans-Regular;
		font-size: 25px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFFFFF;
		text-decoration: none;
		padding: 0px;
		margin: 15px auto;
		box-sizing:border-box;
		display:block;
		position:absolute;
		top: 65%;
		right: 0%;
		bottom: 0%;
		left:10%;
		border: 0px;
	}
}

@media screen and (max-width:812px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 10%;
		left: 10%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 14%;
		left: 10%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 20%;
		left: 41%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 35%;
		left: 35%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:800px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 5%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 9%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 18%;
		left: 37%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		display:none; /*OCULTAMOS EL BOTON DE TIENDA*/
	}
	
	.pagoSeguroLogos{
		width: 50%;
		height: 50%;
		display:block;
		box-sizing:border-box;
		margin:auto;
	}
}

@media screen and (max-width:768px){
    body{
		overflow-x: hidden;
    }

    table{
        padding: 0px;
        height: auto;
        width: 100%;
        border: thin none #000;
        box-sizing: border-box;
        display: inline-table;
        margin: 0px;
    }

    tr{
        text-align: center;
        margin: 0px;
        padding: 0px;
        height: auto;
        width: 100%;
        border: thin none #000;
        box-sizing:border-box;
        display:block;
    }

    td{
        text-align: center;
        padding: 0px;
        height: auto;
        width: 100%;
        border: thin none #000;
        box-sizing: border-box;
        display: block;
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
    }
	
	#menuSys{
		display:none;
	}
	
	.buttonBuscarTienda{
		font-family: RobotoCondensed-Regular;
		font-size: 14px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFF;
		text-decoration: none;
		background-color: #007BFF;
		text-align: center;
		padding: 11px;
		height: auto;
		width: 90%;
		margin-top: 5px;
		margin-right: 0px;
		margin-bottom: 5px;
		margin-left: 5%;
		border: thin solid #007BFF;
		cursor: pointer;
		box-sizing: border-box;
		display: block;
		border-radius: 5px;
	}
	
	.imagenRezice{
		margin: 0px;
		padding: 0px;
		height: auto;
		width: 100%;
		display:block;
		box-sizing:border-box;
	}
	
	/*IMAGENES DE LOS LOGOTIPOS DE LENGUAJES*/
	.imagenRezice2{
		margin: 0px;
		padding: 0px;
		height: auto;
		width: 20%;
		display:inline-block;
		box-sizing:border-box;
	}
	/*IMAGENES DE LOS LOGOTIPOS DE LENGUAJES*/
	
	/*SE OCULTA EL MENUSYS*/
	.mainmenu{
		display:none;
	}
	/*SE OCULTA EL MENUSYS*/
	
	.whatsapp{
		height: auto;
		width: 14%;
		margin: 0px;
		padding: 0px;
		border: thin none #000;
		position: fixed;
		left: 80%;
		top: 86%;
		right: 0px;
		bottom: 0px;
		cursor: pointer;
		box-sizing:border-box;
		display:block;
	}
	
	.preguntaTienda{
		font-family: RobotoCondensed-Regular;
		font-size: 16px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #333;
		text-decoration: none;
		background-color: #FFF3CD;
		padding: 10px;
		height: auto;
		width: 90%;
		margin-top: 10px;
		margin-right: 0px;
		margin-bottom: 10px;
		margin-left: 10px;
		border: thin solid #FFEEBA;
		box-sizing:border-box;
		display:block;
		border-radius:8px;
	}
	
	.respuestaTienda{
		font-family: RobotoCondensed-Regular;
		font-size: 16px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #666;
		text-decoration: none;
		background-color: #D1ECF1;
		padding: 10px;
		height: auto;
		width: 90%;
		margin-top: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		margin-left: 0px;
		border: thin solid #BEE5EB;
		box-sizing: border-box;
		display: block;
		border-radius: 8px;
		float: right;
	}
	
	.boxTienda1{
		display: table;
		width: 100%;
	}

	.boxTienda1 tr{
		display: table-row;
	}

	.boxTienda1 td{
		display: table-cell;
		vertical-align: middle;
		padding: 8px;
		word-break: break-word;
	}

	.boxTienda1 td:first-child{
		width: 35%;
		font-weight: normal;
	}
	
	#modalModDetails #windowModDetails{
		font-family: OpenSans-Regular;
		font-size: 13px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #000;
		text-decoration: none;
		background: linear-gradient(to top, #999, #EFEFEF, #FFF);
		margin: 0px;
		padding: 10px;
		height: auto;
		max-height: 100vh; /* como máximo el 100% del alto visible */
		width: 96%;
		border: thin none #000;
		position: fixed;
		left: 0%;
		top: 0%;
		right: 0px;
		bottom: 0px;
		box-shadow: 1px 1px 10px #000;
		overflow: auto;
		word-break: break-all;
		border-radius: 5px;
		background-color: #FFF;
	}
	
	.hrTienda{
		width: 90%;
		height: auto;
		padding: 0px;
		box-sizing: border-box;
		display: block;
		margin-top: 0px;
		margin-right: 5px;
		margin-bottom: 0px;
		margin-left: 5%;
		border: thin solid #F7931E;
	}
	
	.categorias{
		font-family: RobotoCondensed-Regular;
		font-size: 18px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #F7931E;
		text-decoration: none;
		padding: 5px;
		height: auto;
		width: 50%;
		border: thin none #999;
		box-sizing: border-box;
		display: block;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 25%;
	}
	
	.subcategorias{
		font-family: RobotoCondensed-Regular;
		font-size: 14px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #999;
		text-decoration: none;
		padding: 5px;
		height: auto;
		width: 50%;
		border: thin none #999;
		cursor: pointer;
		box-sizing: border-box;
		display: block;
		margin-top: 0px;
		margin-right: 0%;
		margin-bottom: 0px;
		margin-left: 25%;
	}
	
	.subcategorias:hover{
		background-color: #f9f9f9;
		padding: 5px;
		margin: 0px;
		border: thin solid #999;
		box-sizing:border-box;
		display:block;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 25%;
	}
	
	.panel-logs-container {
		position: absolute;
		top: 16%;
		bottom: 10%;
		left: 2%;
		z-index: 1;
		width: 35%;
		height: 30%;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 8%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 14%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.7em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 25%;
		left: 38%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 40%;
		left: 32%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas {
		position: relative;
		width: 100%;
		height: 450px;
		z-index: 1;
	}
	
	.button5{
		font-family: RobotoCondensed-Regular;
		font-size: 18px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFF;
		text-decoration: none;
		background-color: #0F0B38;
		text-align: center;
		padding: 10px;
		height: auto;
		width: auto;
		margin-top: 5px;
		margin-right: auto;
		margin-bottom: 5px;
		margin-left: auto;
		border: thin solid #081828;
		cursor: pointer;
		box-sizing: border-box;
		display: block;
	}
}

@media screen and (max-width:736px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 12%;
		left: 5%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 17%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 30%;
		left: 46%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 600px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 45%;
		left: 32%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:712px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 15%;
		left: 10%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 20%;
		left: 10%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 30%;
		left: 45%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 45%;
		left: 38%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:667px){
	#textParticulas .span_h3 {
		position: absolute;
		top: 28%;
		left: 50%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.8em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 600px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 41%;
		left: 35%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:658px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 10%;
		left: 5%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 18%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 30%;
		left: 43%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 0.7em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 500px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 35%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:653px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 15%;
		left: 5%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 22%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 30%;
		left: 47%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 550px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 54%;
		left: 36%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:608px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 15%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 20%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 28%;
		left: 39%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 48%;
		left: 39%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
		display:block;
	}
}

@media screen and (max-width:581px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 15%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
}

@media screen and (max-width:575px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 15%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 20%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 28%;
		left: 40%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 48%;
		left: 40%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
		display:block;
	}
}

@media screen and (max-width:568px){
	
	#textParticulas .span_h3 {
		display:none;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 30%;
		left: 40%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:526px){
	#textParticulas .span_h1 {
		position: absolute;
		top: 15%;
		left: 5%; /* Puedes cambiar este valor */
		color: #000000;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 20%;
		left: 5%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.5em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		position: absolute;
		top: 28%;
		left: 44%;
		transform: translateX(-50%); /* Esto centra el bloque */
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
		display:block;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 47%;
		left: 44%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (min-width: 501px) {
  #particles-js {
    display: block !important;
  }

  #textParticulas {
    background-image: none !important;
    background-color: #0F0B38;
    height: 850px;
  }
}

/*PARA MOSTRAR LAS PARTICULAS DESDE ESTA REDIMENSION DE PANTALLA Y HABILITAR iniciarParticlesJS EN PARTICULAS.JS 
LOS TAMAÑOS ESTAN ESTABLECIDOS EN EL INDEX EN DIV particles-js Y DIV particles-js-edge*/
@media screen and (max-width:500px){
	.logoRezice{
		margin: 0 auto;
		padding: 0px;
		height: auto;
		width: 45%;
		box-sizing:border-box;
		display:block;
	}
	
	.pintarTablaParticulas {
		background-color: #0A0A31;
		display: table; /* o block, según cómo estés usando el elemento */
	}
	
	#particles-js {
		display:block; !important; /*ESTA PARTE DE AQUI MUESTRA LAS PARTICULAS CON IMAGENES*/
	}
	
	.panel-logs-monitor, .panel-logs-stand, .panel-logs-base {
		display:none;
	}
	
	#textParticulas .span_h1{
		position: absolute;
		top: 18%;
		left: 10%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1.3em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 30%;
		left: 10%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1.2em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		display:none;
	}
	
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 68%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	#textParticulas {
		position: relative;
		width: 100%;
		height: 250px; /*ALTO DEL CUADRO COLOR AZUL, ES EL FONDO*/
		z-index: 1;
		background-image: url('../images/b02.png'); /*IMAGEN QUE SE MUESTRA DE FONDO EN CASO DE MOSTRARLA*/
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.hideTable{
		display:block;
	}
	/*PARTE PARA DARLE ALTO A LAS PARTICLAS EN DIMENSIONES DE 500PX A MENOR*/
	.pintarTablaParticulas {
		height: auto;
	}
	.pintarTablaParticulas td {
		height: auto;
	}
    #particles-js, #particles-js-edge {
        height: 300px; /* alto para móvil */
    }
}

@media screen and (max-width:480px){
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 51%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:430px){
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 58%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	.h5_CXP{
		font-family: OpenSans-Regular;
		font-size: 25px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFFFFF;
		text-decoration: none;
		padding: 0px;
		margin: 15px auto;
		box-sizing:border-box;
		display:block;
		position:absolute;
		top: 75%;
		right: 0%;
		bottom: 0%;
		left:5%;
		border: 0px;
	}
}

@media screen and (max-width:428px){
	
}

@media screen and (max-width:414px){
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 58%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:393px){
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 61%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:390px){
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 61%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:379px){
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 65%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width:375px){
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 65%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width: 344px) {
	
}

@media screen and (max-width: 360px) {
	#textParticulas .btStore{
		position: absolute;
		top: 55%;
		left: 66%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}

@media screen and (max-width: 320px) {
  #chatbot {
    width: 260px; /* Reducir el ancho para pantallas pequeñas */
    bottom: 50px; /* Ajustar la posición inferior */
    right: 10px; /* Reducir el margen derecho */
    font-size: 14px; /* Reducir el tamaño de fuente para todo el chatbot */
  }

  #chatbot-header {
    font-size: 16px; /* Ajustar tamaño del encabezado */
    padding: 8px; /* Reducir el padding */
  }

  #chatbot-messages {
    height: 250px; /* Reducir altura del contenedor de mensajes */
    padding: 8px; /* Reducir el padding */
  }

  #chatbot-input {
    flex-direction: column; /* Cambiar a diseño vertical para ahorrar espacio */
  }

  #chatbot-input textarea {
    border-radius: 0; /* Quitar los bordes redondeados */
    margin-bottom: 8px; /* Separar el área de texto del botón */
  }

  #chatbot-input button {
    border-radius: 0; /* Ajustar el diseño del botón */
    padding: 8px; /* Reducir el padding */
    font-size: 14px; /* Reducir el tamaño del texto */
  }

  #toggle-chatbot {
    bottom: 10px; /* Ajustar la posición inferior */
    right: 10px; /* Ajustar el margen derecho */
    padding: 8px 12px; /* Reducir tamaño del botón */
    font-size: 16px; /* Ajustar tamaño del texto */
  }

  .user-message,
  .bot-message {
    font-size: 12px; /* Reducir tamaño de fuente en los mensajes */
    padding: 6px; /* Reducir el padding interno */
  }
  
  .logoRezice{
		margin: 0 auto;
		padding: 0px;
		height: auto;
		width: 45%;
		box-sizing:border-box;
		display:block;
	}
	
	#btnStore{
		width: auto;
		height: auto;
		display: block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		margin: 0;
		padding: 12;
		box-sizing: border-box;
		color: #FFFFFF;
		font-family: RobotoCondensed-Regular;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: normal;
		text-align: center;
		border: thin solid #F7931E;
		background-color: #F7931E;
		cursor:pointer;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 50%;
		left: 73%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
	
	.h5_CXP{
		font-family: OpenSans-Regular;
		font-size: 25px;
		font-style: normal;
		line-height: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		color: #FFFFFF;
		text-decoration: none;
		padding: 0px;
		margin: 15px auto;
		box-sizing:border-box;
		display:block;
		position:absolute;
		top: 55%;
		right: 0%;
		bottom: 0%;
		left:5%;
		border: 0px;
	}
}


@media screen and (max-width:280px){
	.logoRezice{
		margin: 0 auto;
		padding: 0px;
		height: auto;
		width: 35%;
		box-sizing:border-box;
		display:block;
	}
	
	#textParticulas .span_h1 {
		position: absolute;
		top: 5%;
		left: 10%; /* Puedes cambiar este valor */
		color: #FFFFFF;
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h2 {
		position: absolute;
		top: 15%;
		left: 10%; /* Igual que arriba */
		color: #EDA302;
		font-size: 1em;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
	}
	
	#textParticulas .span_h3 {
		display:none;
	}
	
	#textParticulas .btStore{
		position: absolute;
		top: 32%;
		left: 81%;
		transform: translateX(-50%); /* Esto centra el bloque */
		color: #FFFFFF;
		font-size: 18px;
		font-family: RobotoCondensed-Regular;
		z-index: 1;
		text-align: left; /* <-- Esto alinea el contenido del bloque a la izquierda */
		width: 400px; /* O el ancho que necesites para que el texto no se rompa */
	}
}