/* 
	Estructura de diseño 
	Planificacion de estilo 
	
	ESTRUCTUTA DE LA PAGINA INDEX
	
	1.- 	ContenidoGeneral 
		1.1- 	navegador 
		1.2- 	banner 
		1.3- 	category 
		1.4- 	bannerPublic
		1.5- 	productsDesct 
		1.6- 	abouts 
		1.7- 	clients 
		1.8- 	footer 

	ESTRUCTUTA DE LA PAGINA QUIENES SOMOS
	
	2.- 	ContenidoAbouts 
		2.1- 	TitPage 
		2.2- 	section1 
		2.3- 	section2
		2.4- 	section3
		2.5- 	section4
		2.6- 	section5
		2.7- 	section6
		2.8- 	section7
*/

:root{
	--azul-ecom:  rgba(4, 44, 84, 1);
	--verde-ecom: rgba(203, 251, 12, 1); 
	
	--lineablue:linear-gradient(to left, var(--azul-ecom),  #0c3454);
	--lineaorange:linear-gradient(to left, var(--verde-ecom), var(--verde-ecom));

	/* --lineablue:linear-gradient(to left, #002f8a, #005cbd);
	--lineaorange:linear-gradient(to left, #fe322b , #fa7f43); */
}

*{	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

img{
	width: 100%;
	height: 100%;
}

.cont-padding{
	padding: 2rem 6rem;
}

.cont-padding-one{
	padding: 1rem;
}

.cont-padding-four{
	padding: 4rem;
}

.active{
	display: block;
}

.listRoute{
	display: flex;
	width: 100%;
	justify-content: center;
}

.listRoute li{
	list-style:url('../img/mayor.png');
}

.listRoute li:first-child{
	list-style: none;
}

.listRoute li:last-child{
	color: var(--azul-ecom);
	font-weight: bold;
}

.listRoute li{
	margin:0 1%; 
}
.listRoute li a{
	text-decoration: none;
	color:#212529;
}

/*******************************************************************************************************************************/
/********************************************* ESTRUCTUTA DE LA PAGINA INDEX ***************************************************/
/*******************************************************************************************************************************/

.contenidoGeneral{
	background: white;
}

.navegador{ grid-area: navegador; 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	padding: 0.8rem 2rem; 
	height: 100%; 
	position: block; 
	height: 70px; 
	background: #fff; 
	z-index: 100; 
	width: 100%; 
	box-shadow: 0px 2px 12px 1px #cecece55;
}

	.NavLeft{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 0;
		width: 50%;
		padding: 0;
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 500;
	}

	.NavLeft li{
		list-style: none;
		margin-right: 1%;
		margin-left: 1%;
	}

	.NavLeft li a{
		text-decoration: none;
		color: #212529;
	}

	.NavLogo{
		width: 180px;
		height: 100%;	
	}

	.NavRight{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 50%;
	}
	.NavRightLink{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 0;
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 500;
		
		& .navsearch{
			border-right: 1px solid #dedede;
		}
	
		& .navsearch input{
			border:1px solid transparent;
		}
	
		& .navsearch .input-group-text{
			background-color:transparent;
			border: 1px solid transparent;
		}
	}


	.NavRight li{
		list-style: none;
		margin-left: 2%;
	}
	
	.btn{
		background: var(--azul-ecom) !important;
    	border: 1px solid var(--verde-ecom);
    	color: var(--verde-ecom);
	}

	.btn-dropdown{
		border:0px solid transparent;
		padding: 2px 10px;
		background: none;
	}

	.dropdown-item{
		font-size: 12px;
	}

	.accesicon{
		display: flex !important;
		justify-content: space-between;
	}

	.fa-questions{
		background: #cecece;
		padding: 0.25rem 0.5rem;
		border-radius: 50%;
	}

	.fa-cart{
		background: black;
		border-radius: 50%;
		padding: 0.7rem 0.75rem;
		color: #e9ecef;
	}

	.NavLeft li a:hover, .NavRight li:hover{
		color: rgba(168, 235, 110, 0.826);
		cursor: pointer;
	}

	.NavRightCart{
		margin: 0;
	}

.ContenidosYield{
	display: block;
	padding: 1rem 3rem;
}

.contenidoIndex{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(6, auto);	
	grid-template-areas: "banner" "bannerPublic" "category" "productsDest" "abouts" "clients";
	grid-gap: 4rem;
	width: 100%;
	position: relative;
	background: white;	
}

/* ************* 1.2 banner *****************/
.banner{
	grid-area: banner;
	height: auto;
	position: relative;
	width: 100%;
	overflow: hidden;
}

	.Banheader {
		height: 100%;
		position: relative;
		border-radius: 1rem;
	}
	
	.Banheader img{
		border-radius: 1rem;
		object-fit: fill;
		max-height: 75vh;
		width: 100%;
		aspect-ratio: 2 / 1;
	}

	.type1Content{
		z-index: 2;
		position: absolute;
		bottom: 2rem;
		left: 4rem;
		width: 30%;
		padding: 1.8rem;
		background: #00000099;
		border-radius: 10px;
	}

	.type1Content span{
		color: #cdf90e;
	}
	
	.type1Content h3{
		font-weight: bold;
		font-size: 2rem;
		color: white;
	}

	.type1Content h6{
		color: #a2dae4;
	}

	.btn-shopping{
		display: block;
		background: white;
		box-shadow: 0px 0px 18px 3px #96b0cb44;
		padding: .75rem 1.2rem;
		border-radius: 50rem;
		text-decoration: none;
		width: max-content;
		text-align: center;
		font-size: 0.8rem;
		color: black;
		font-weight:bold;
	}

	.owl-BanHeader .owl-nav{
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 50%;
		left: 0%;
		right: 0;
	}
	
	.owl-BanHeader .owl-carousel .owl-nav button.owl-next, 
	.owl-BanHeader .owl-carousel .owl-nav button.owl-prev{
		width: 4% ;
		color:black;
		transition:0.5s;
		box-shadow: 0px 0px 12px -3px #0051ab;
	}

	.owl-BanHeader .owl-dots{
		display: none;
	}

/* 1.3 Category */

.category{
	grid-area: category;
	height: 100vh;
	border-radius: 1rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

	.gridItems{
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		gap: 1rem;
	}
	.Items{ border-radius: 1rem; position: relative;}
	.Items img{ width: 100%; height: 100%; object-fit: scale-down; border-radius: 1rem;}
	.Items a{ position: absolute; bottom: 0.75rem; left: 1rem; text-decoration: none; color: #fff; text-shadow: 1px 1px 1px #00000066; font-size: 1vmax;}

	.Items:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
	.Items:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
	.Items:nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
	.Items:nth-child(4) { grid-area: 1 / 3 / 2 / 5; }
	.Items:nth-child(5) { grid-area: 2 / 3 / 3 / 4; }
	.Items:nth-child(6) { grid-area: 2 / 4 / 3 / 5; }

/* 1.3 Category Modelo anterior con carousel */

/* .category{
	grid-area: category;
	text-align: justify;
}

	.wrapper{
		width: 100%;
	}

	.wrapper .carousel{
		max-width: 1280px;
		margin: auto;
		padding: 0;
	}

	.carousel .card{
		text-align: center;
		color: white;
		font-weight: 600;
		margin: 0px 20px 20px;
	}

	.card{
		border:0px solid transparent !important;
	}

	.owl-nav{
		display: flex;
		justify-content: center;
	}
	
	.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel button.owl-dot:hover{
		background: blue;
		color: white;

	}
	
	.owl-carousel .owl-nav button.owl-next:focus, .owl-carousel .owl-nav button.owl-prev:focus, .owl-carousel button.owl-dot:focus{
		outline: none;
	}

	.owl-nav button span{
	    font-size: 1.5rem;
	}
	
	.cat-panel{
		display: block;
		box-shadow: 2px 4px 12px 5px #dedede44;
		background: #a2dae4;
	}

	.cat-panel img{
		height: 150px;
		width: 100%;
		object-fit: fill;
	}

	.category h3{
		font-family: 'Poppins', sans-serif;
		font-size: 35px;
		text-align: center;
		font-weight: 600;
		padding: 1rem;
	}

	.cat-panel a{
		padding: 0.5rem 1rem;
		display: block;
		text-decoration: none;
		color: black;
		text-align: center;
		font-weight: 500;
		text-transform: uppercase;
		background: #25262711;
	} */

/* 1.4 Banner Publicitarios */
.bannerPublic{
	grid-area: bannerPublic;
	height: auto;
	position: relative;
	width: 100%;
	overflow: hidden;
}

	.Pbl-slide .Pbl-items{
		width: 100%;
		height: 10vh;
		border-radius: 1rem;
		/* background: grey; */
	}
	
	.Pbl-slide .Pbl-items img{
		width: 100%;
		height: 100%;
		object-fit: scale-down;
		padding: 1rem;
		border-radius: 1rem;
	}

	.bannerPublic .owl-dots{
		display: none;
	}

/* 1.5 Productos Destacados  */
.productsDest{
	grid-area: productsDest;
	height: auto;
	position: relative;
	width: 100%;
	overflow: hidden;
}

	.productsDest h3{
		font-family: 'Poppins', sans-serif;
	    font-size: 35px;
	    text-align: center;
	    font-weight: 600;
	    padding: 1rem;
	}

	.productsDestList{
		display: flex;
		justify-content: center;
		align-items: center;
		text-transform: uppercase;
		list-style: none;
	}

	.productsDestList li{
		margin: 10px 3%;
		font-size: 12px;
	}
		
	.productsDestList li a{
		text-decoration: none;
		color: #9fa4af;
	}

	.mhn-slide .mhn-item{
		padding: 10px;
	}

	.mhn-slide-pro .mhn-item{
		width:100%;
	}

	.mhn-slide .mhn-inner{
		/* padding: 10px; */
		box-shadow:0px 0px 10px -3px #96b0cb;
		border-radius: 1rem;
	}

	.mhn-slide .mhn-item a, .mhn-slide-pro .mhn-item a{
		text-decoration: none;
		color:#252627;
	}

	.mhn-slide .mhn-inner, .mhn-slide-pro .mhn-inner{
		width:100%;
		height:100%;
	}

	.mhn-slide .mhn-inner-img, .mhn-slide-pro .mhn-inner-img{
		height: 350px;
    	padding: 2rem 0.75rem;
		border-radius: 1rem 1rem 0 0;
	}

	.mhn-slide .mhn-inner-img img, .mhn-slide-pro .mhn-inner-img img{
		object-fit: scale-down;
		width: 100%;
		height: 100%;
	}

	.mhn-slide .mhn-text, .mhn-slide-pro .mhn-text{
		padding: 0.6rem 0.3rem;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	}

	.mhn-slide .mhn-text h6, .mhn-slide-pro .mhn-text h6{
		color:#25262766;
		font-weight:700;
		white-space:nowrap;
		text-overflow:ellipsis;
		text-transform: uppercase;
		overflow:hidden;
    	margin-top: 0.3rem;
    	font-size: 12px;
    	margin: 0;
	}

	.mhn-slide .mhn-text p, .mhn-slide-pro .mhn-text p{
		max-height:4.5em;
		font-size: 10px;
		text-transform: uppercase;
		overflow:hidden;
	    text-overflow: ellipsis;
    	white-space: nowrap;
    	margin: 0px;
	}

	.mhn-slide .mhn-text span, .mhn-slide-pro .mhn-text span{
		font-size: 12px;
	}

	.mhn-slide .owl-stage-outer, .mhn-slide-pro .owl-stage-outer{z-index:1}

	.mhn-slide .owl-nav{
		display: flex;
		justify-content: center;
		padding: 1rem 0;
	}

/* 1.5 Nosotros */
.abouts{
	grid-area: abouts;
}

	.aboutsLeft{
		background: #f9f9f9;
		padding: 4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
		.aboutsLeft h3{
			font-family: 'Poppins', sans-serif;
			font-size: 35px;
			text-align: center;
			font-weight: 600;
			padding: 1rem;
			color: rgba(22, 29, 125, 1);
		}

		.aboutsLeft p{
			text-align: justify;
			font-size: 14px;
		}

		.aboutsLeft img{
			width: 100%;
			height: auto;
			margin: 0 auto;
			aspect-ratio: 16 / 2;
			object-fit: scale-down;
		}

	.aboutsRight{
		background: blue;
		padding: 2rem;
	}

		.aboutsRight h3{
			font-family: 'Poppins', sans-serif;
			font-size: 30px;
			text-align: center;
			font-weight: 600;
			color: white;
		}

		.aboutsRight h5{
			color: white;
			text-align: center;
			font-size: 16px;
			text-transform: uppercase;
		}

		.aboutsRightVideo{
			position: relative; display: block;height: 350px;
		}

		.aboutsRightSectionVideo{
			position: absolute;bottom: 0;top: 0;left: 0;right: 0;
		}

		.aboutsRightSectionVideo .owl-item {
		  display: table;
		  height: 100%;
		}

		.video-slider button.owl-next, .video-slider button.owl-prev{
			width: 10% !important;
		}
		.video-slider button.owl-next:hover, .video-slider button.owl-prev:hover{
			box-shadow: 0px 0px 9px 2px #25262788 !important;
		}

		.video-slider .item {
		  display: table-cell;
		  vertical-align: middle;
		  text-align: center;
		}

.clients{
	grid-area: clients;
}

	.clients h3{
		font-family: 'Poppins', sans-serif;
		font-size: 35px;
		text-align: center;
		font-weight: 600;
		padding: 1rem;
	}

	.clientsstadist{
		padding: 0 1rem;
	}

	.progressPanel{
		display: flex;
		margin-bottom: 10px;
	}

	.progressPanel label{
		width: 30%;
		font-size: 10px;
	}

	.progressPanel .progress{
		width: 80%;
	}

	.progress-bar{
		background: #fc9d36;
	}

	.progressPanel span{
		width: 15%;
		font-size: 10px;
		display: flex;
		justify-content: flex-end;
	}

	/*.Pbl-client .owl-nav.disabled {
		margin-top: 10px;
		display: flex !important;
	}*/

	.ClientsPanel{
		display: grid;
		grid-template-columns: 60px 1fr;
		grid-template-rows: 2fr;
		grid-template-areas: "ClientsImg ClientsResult" "ClientsTesti ClientsTesti"; 
		box-shadow: 0px 0px 12px -2px #d3d3d3;
		border-radius: 6px;
		grid-gap: 10px;
		padding:1rem; 
		margin:1% 2%;
	}

	.ClientsImg{
		grid-area: ClientsImg;
	}

	.ClientsImg img{
		border-radius: 50px;
	}

	.ClientsResult{
		grid-area: ClientsResult;
		width: 100%;
		padding: 0.25rem;
	}

		.ClientsClasf{
			display: flex !important;
			justify-content: space-between;
			align-items: center;
		}

		.ClientsClasf span{
			width: 100%;
		}

		.ClientsClasf span i{
			color: yellow;
		}

		.ClientsClasf span:nth-child(2){
			font-size: 10px;
			display: flex;
			justify-content: flex-end;
			color: #cecece;
		}

	.ClientsTesti{
		grid-area: ClientsTesti;
		font-size: 12px;
		color: #252627;
		text-align: justify;
	}


.footer{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas: " footerLeft footerLogo footerRight"; 
	border-top:1px solid #dedede;
	position: relative;
	bottom: 0;
}

	.footerLeft{
		grid-area: footerLeft;
	}

		.footerleftDir{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.footerleftDir li a, .footerRightredes li a{
			text-decoration: none;
			color: #252627;
		}

		.footerleftDir li{
			list-style: none;
			margin: 0 5%;
			font-size: 12px;
			text-align: left;
		}

	.footerLogo{
		grid-area: footerLogo;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		.footerLogo img{
			width: 180px; 
			height: 40px;
		}

		.footerLogo span:last-child{
			font-size: 10px;
		}

	.footerRight{
		grid-area: footerRight;
	}

		.footerRightredes{
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.footerRightredes li{
			list-style: none;
			margin: 0 5%;
			font-size: 12px;
			text-align: left;
		}
	
	.modal_shopping{
		background: #00000033;
	}

	.modal_shopping .modal-dialog{
		margin: 4.5rem 0rem auto auto;
	}

	.modal_shopping .modal-header{
		padding: 1rem;
	}

	.modal_shopping .modal-header h5{
		margin-bottom: 0;
	}

		.shopping-list{
			display: flex;
			padding-left:0;
			align-items: center;
		}

		.shopping-list li{
			list-style: none;
			margin-right: 10px;
		}

		.shopping-list .list-img{
			width: 100px;
			height: 70px;
			padding: 10px;
		}

	.modal_shopping .modal-footer{
		padding: 0.5rem;
	}

	.modal-footer a{
		margin:0 0.25rem;
	}

	.Scroll{
		overflow-y: auto;
		height: 65vh;
	}

	.content-clear{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		text-align: center;
	}

/*******************************************************************************************************************************/
/******************************************* ESTRUCTUTA DE LA PAGINA QUIENES SOMOS *********************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoAbouts{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(7, auto);	 
	grid-template-areas: "TitPage" "section_one" "section_two" "section_three" "section_four" "section_five" "section_six";
	width: 100%;
	position: relative;
	background: white;

}

.TitPage {
	padding-top: 20px;
	grid-area:TitPage;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.TitPage h2{
	font-weight: 600;
}

.section_one{
	grid-area: section_one;
	text-align: justify;
}

	.ceologo {
		display: flex;
		justify-content: center;
		border-right: 2px solid #fc5937;
	}

	.ceologo img{
		width: 100%;
		height: 100%;
		aspect-ratio: 2 / 1;
		object-fit: contain;
	}

	.ceotext{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.ceotext span{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding-left: 2rem;
	}

	.ceotext p{
		padding: 0 2rem;
	}

.section_two {
	grid-area: section_two;
	height: 80vh;
}

.section_two img{
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}

.section_three {
	grid-area: section_three;
}

	.section_three_panel {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.section_three_panel p{
		text-align: justify;
		padding: 1rem 4rem;
		margin-bottom: 0;
	}

.section_four {
	grid-area: section_four;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
	.section_valores{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.section_valores li{
		margin: 2%;
		list-style:none;
		font-weight: 700;
	}

.section_five {
	grid-area: section_five;
	display: block;
	text-align: center;
}

	.fundator {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fundator-paneles{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.fundator-paneles img{
		width: 90%;
		border-radius: 50%;
		margin-bottom: 2rem;
	}

.section_six {
	grid-area: section_six;
	display: flex;
	justify-content: center;
	align-items: center;
}

.section_six span{
	font-style: oblique;
	color: #7d7d7d;
	font-size: 18px;
}

/*******************************************************************************************************************************/
/********************************************** ESTRUCTUTA DE LA PAGINA PRODUCTOS **********************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoProductos{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);	 
	grid-template-areas: "TitPage" "product_one";
	width: 100%;
	position: relative;
	background: white;
}

.product_one{
	height: 100%;
	grid-area:product_one;
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "nav-products content-products";
	padding-top: 0;
}

	.nav-products{
		grid-area: nav-products;
		height: 100%;
		padding: 0; 
	}
		.nav-products label{
			font-size: 1.4rem;
			padding-bottom: 0.5rem;
		}

		.nav-serach{
			padding-bottom: 0.75rem;
		}


		.nav-category{
			padding-bottom: 0.85rem 0;
		}

		.list-products {
			margin: 0;
			padding: 0;
		}
		
		.list-products a{
			text-decoration: none;
			color: #252627;
		}

		.list-products li{
			list-style: none;
			padding: 0.3rem 1rem;
		}

		.list-products li:hover{
			background: black;
			color: white;
			cursor: pointer;
		}

	.content-products{
		padding: 0 1rem;
		grid-area: content-products;
	}

/*******************************************************************************************************************************/
/***************************************** ESTRUCTUTA DE LA PAGINA PRODUCTOS DETAILS *******************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoProductosDetails{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, auto);	 
	grid-template-areas: "TitPage" "productDetails_one" "productDetails_two" "productDetails_three" "productDetails_four";
	width: 100%;
	position: relative;
	background: white;
}

.productDetails_one{
	/*height: 100vh;*/
	grid-area:productDetails_one;
}

.productDetails_two{
	grid-area:productDetails_two;
}

	.productDetails_two_panel{
		display: flex;
		height: 60vh;
	}

.productDetails_three{
	grid-area:productDetails_three;
}

	.productDetails_three h3{
		font-family: 'Poppins', sans-serif;
		font-size: 35px;
		text-align: center;
		font-weight: 600;
		padding: 1rem;		
	}

.productDetails_four{
	grid-area:productDetails_four;
}

	.productDetails_four h3{
		font-family: 'Poppins', sans-serif;
		font-size: 35px;
		text-align: center;
		font-weight: 600;
		padding: 1rem;		
	}

	.slideButton{
		position: absolute;
	    width: 60px;
	    z-index: 1;
	    background-color: #FFFFFF;
	    color: #000;
	    border: 0px;
	    border-radius: 50px;
	    font-size: 1.2rem;
	    padding: 0.25rem 0;
		box-shadow: 0px 0px 12px -3px #cecece;
	}

	#buttonleft{
		left: 20px;
		top:50%;
		transition:1s;
	}

	#buttonright{
		top:50%;
		right: 20px;
		transition:1s;
	}

	#buttonleft:hover, #buttonright:hover{
		color:white;
		transition:0.5s;
		background: #0051ab;
		box-shadow: 0px 0px 12px -3px #0051ab;
	}

.contslyder{
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "thumbnai sliders";
	/*grid-gap: 10px;*/
	height: 75vh;
}

.thumbnai{
	grid-area: thumbnai;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

	.thumbnai div{
		box-shadow: 0px 0px 5px 1px #27262555;
	    margin: 10px 2px;
	    padding: 0.3rem;
	    height: 80px;
	    width: 80px;
	}

	.thumbnai img{
		padding: 5px;
		width: 100%;
		height: 100%;
	}

.sliders{
	grid-area: sliders;
}

	.sliders img{
		padding: 2rem;
		width: 100%;
		height: 100%;
		object-fit: scale-down;
	}


	.contdetallClasf{
		min-width: 50%;
		display: flex !important;
		align-items: center;
		margin:10px 0;
	}

	.contdetallClasf span{
		margin-right: 10px;
	}

	.contdetallClasf span i{
		color: yellow;
	}

	.contdetallClasf span:nth-child(2){
		font-size: 10px;
		display: flex;
		color: #cecece;
	}

	.listDetal{
		padding:0; 
		min-height: 25vh;
	}

	.listDetal li{
		list-style: none;
	}

	.selectproduct{
		width: 30%;
		margin-bottom: 1rem;
		padding: 0.5rem;
		font-size: 14px;
	}

	.selectproduct:first-child{
		border-left:none;
		border-top:1px solid #21252955;
		border-bottom:1px solid #21252955;
		border-right: none;
	}

	.selectproduct:last-child{
		border-left:1px solid #21252955;
		border-top:1px solid #21252955;
		border-bottom:1px solid #21252955;
		border-right: none;
	}


	input[type=number] {
	  float: left;
	  height: 35px;
	  padding: 0;
	  font-family: 'Poppins', sans-serif;
	  font-weight: 500;
	  font-size: 1.2em;
	  text-transform: uppercase;
	  text-align: center;
	  color: #252627;
	  border: transparent;
	  background: none;
	  outline: none;
	  pointer-events: none;
	}

	span.spinner {
		border-radius: 50px;
		border:1px solid #25262755;
		margin-right: 10px;
	}

	span.spinner > .sub,
	span.spinner > .add {
	  float: left;
	  display: block;
	  width: 30px;
	  height: 35px;
	  text-align: center;
	  font-family: 'Poppins', sans-serif;
	  font-weight: 500;
	  font-size: 1.2em;
	  line-height: 33px;
	  color: #252627;
	  cursor: pointer;
	  transition: 0.1s linear;
	  -o-transition: 0.1s linear;
	  -ms-transition: 0.1s linear;
	  -moz-transition: 0.1s linear;
	  -webkit-transition: 0.1s linear;
	}

	span.spinner > .add {
	  top: 0;
	}

	span.spinner > .sub:hover{
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		background: #25262755;
	 	color: white;
	}

	span.spinner > .add:hover {
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		background: #25262755;
	  color: white;
	}

	 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
	 -webkit-appearance: none;
	}

	.addaCart_button{
		display: block;
	}

	.addaCart_button button{
		border-radius: 50px;
		background: black;
		color: white;
		padding:0.4rem 2rem; 
		font-size: 14px;
		border:0;
		text-transform: uppercase;
	}

	.prod-caract{
		background: #ebebeb;
		display: block;
	}

	.prod-caract-text{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
	}
	.prod-caract-text h3{
		margin-bottom: 0;
	}

	.prod-avanzado{
		margin-bottom: 1rem;
	}

	.prod-avanzado input{
		background: transparent;
		border:none;
		/*box-shadow: 0px 1px 0px 0px #26252711;*/

	}

	.prod-avanzado label{
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 600;
	}

/*******************************************************************************************************************************/
/********************************************** ESTRUCTUTA DE LA PAGINA CONTACTOS **********************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoContactos{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);	 
	grid-template-areas: "TitPage" "contact_one" "contact_two" "contact_three";
	width: 100%;
	position: relative;
	background: white;
}

.contact_one{
	grid-area:contact_one;
}

	.contact_img{
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 2px solid #fc5937;
	}

	.contact_img img{
		width: 50%;
		height: 50%;
	}

	.cont_one li, .cont_two li, .cont_three li, .cont_four li{
		list-style: none;
	}

	.cont_one li h4{
		margin-bottom: 0;
	}

	.cont_three, .cont_four{
		display: flex;
		align-items: center;
	}
	.cont_three li, .cont_four li{
		padding-right: 1rem; 
		width: 25%;
	}

.contact_two{
	height: 70vh;
	grid-area:contact_two;
}

.contact_three{
	grid-area:contact_three;
}

	.from-contact{
		width: 70%; 
		margin:0 auto; 
		display: flex; 
		flex-direction: column; 
		justify-content: center; 
		align-items: center;
	}

	.from-contact p{
		font-style: oblique; 
		color: #7d7d7d; 
		font-size: 12px; 
		width: 50%; 
		text-align: center;
	}

	.formulario-contact{
		width: 100%; margin-bottom: 1rem;
	}

	.form-control-contact{
		box-shadow: 0px 1px 0px 0px #c4c4c4; 
		border:transparent !important; 
		border-radius: 0 !important;
		resize: none;
	}

	.form-control-textarea{
		display: block;
		width: 100%;
	}

	.form-control-button{
		display: block;
		width: 100%; 
		display: flex; 
		justify-content: center; 
		padding: 1rem;
	}

	.form-control-button button{
		border-radius: 50px; 
		padding: 0.5rem 1.5rem; 
		font-size: 12px; 
		background: #0055b2; 
		color:white; 
		border:none;
	}

/*******************************************************************************************************************************/
/************************************ ESTRUCTUTA DE LA PAGINA PRODUCTS CATEGORY ************************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoCategory{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "Category";
	width: 100%;
	position: relative;
	background: white;
}

.Category{
	grid-area:Category;
	scroll-behavior: smooth;
}

.nav-categry{
	position: fixed;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	z-index: 1000;
}

.nav-categry ul{
	counter-reset: ad;
	list-style: none;
	padding: 0;
	margin: 0;
}

	.nav-categry ul li{
		width: 250px;
		position: relative;
		text-align: right;
	}

	.nav-categry ul li .dot{
		color: white;
		display: block;
		padding: 3px 0;
	}

	.nav-categry ul li .dot span{
		display: inline-block;
		background: #e9ecef;
		letter-spacing: 1px;
		padding: 10px 25px;
		margin-right: 30px;
		border-radius: 3px;
		transform: translateX(30px);
		opacity: 0;
		color: black;	
	}

	.nav-categry ul li:hover .dot span{
		transform: translateX(0px);
		opacity: 1;
	}

	.nav-categry ul li .dot span::before{
		content: '';
		position: absolute;
		top: 50%;right: 0;
		transform: translate(7px, -50%);
		border-left: 7px solid #e9ecef;
		border-top: 7px solid transparent;
		border-bottom: 7px solid transparent;
		display: block;
	}

	.nav-categry ul li .dot::before,
	.nav-categry ul li .dot::after{
		content: '';
		position: absolute;
		top: 50%;
		border-radius: 50%;
		display: block;
		transition: 0.1s ease-out;
	}

	.nav-categry ul li .dot::before{
		height: 5px;
		width: 5px;	
		border:2px solid #f26c4f;
		right: 0;
		transform: translateY(-50%);
	}

	.nav-categry ul li .dot .active::before,
	.nav-categry ul li:hover .dot::before{
		border-color: black;
		background: black;
	}

	.nav-categry ul li .dot::after{
		height: 15px;
		width: 15px;	
		border:2px solid #f26c4f;
		right: -5px;
		transform: translateY(-50%) scale(0);
	}

	.nav-categry ul li .dot .active::after,
	.nav-categry ul li:hover .dot::after{
		transform: translateY(-50%) scale(1);
	}
/*
.count::before{
	counter-increment: ad;
	content: counter(ad);
}*/

.sec{
	height: 100vh;
	display: flex;
	align-items: center;
	overflow-y: none;
	position: relative;
	margin-bottom: 3rem;
	& img{
		width: 100%;
		height: 100%;
		object-fit: fill;
		aspect-ratio: 3 / 1;
		border-radius: 16px;
	}
}

.TitCategory{
	position: absolute;
	color: white;
}

	.structCat{
		/*background: rgba(0,0,0,0.4);*/
	    padding: 2rem 3rem;
	    border-radius: 12px;
	    width: 450px;
	}

	.structCat h1{
		text-transform: uppercase;
		/* font-size: ; */
	}

	.structCat h5{
		text-transform: uppercase;
		margin-bottom: 0;
		letter-spacing: 5px;
	}
	

.sec:nth-child(2n) .TitCategory{
	justify-content: flex-start;
	right: 10%;
	text-align: right;
}

	.sec:nth-child(2n) .TitCategoryList{
		justify-content: flex-start;
	}

.sec:nth-child(2n+1) .TitCategory{
	justify-content: flex-end;
	left: 10%;
	text-align: left;
}

	.sec:nth-child(2n) .TitCategoryList{
		justify-content: flex-end;
	}

.TitCategoryList {
	display: flex;
	padding: 0;
}

.TitCategoryList li{
	margin: 2%;
	list-style: none;
	font-size: 12px;
}

.TitCategory a{
	background: white;
	color: black;
	padding: 0.5rem 1.7rem;
	border-radius: 50px;
	text-decoration: none;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
}


/*******************************************************************************************************************************/
/************************************ ESTRUCTUTA DE LA PAGINA PRODUCTS CATEGORY ************************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoProCategory{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);	 
	grid-template-areas: "Procategory_one" "SubtitPage" "Procategory_two" "Procategory_three";
	width: 100%;
	position: relative;
	background: white;
}

.SubtitPage {
	grid-area:SubtitPage;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	padding-bottom: 0;
}

.SubtitPage h2{
	font-weight: 600;
}

.SublistRoute{
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding: 0;
	margin-bottom: 0;
}

.SublistRoute li:first-child{
	list-style: none;
}

.SublistRoute li{
	margin:0 1%; 
}
.SublistRoute li a{
	text-decoration: none;
	color:#212529;
}

.Procategory_one{
	height: 50vh;
	grid-area:Procategory_one;
	position: relative;
	border-radius: 1rem;
}

	.Procategory_one img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 1rem;
	}

	.Procategory_one_title{
		position: absolute;
	    bottom: 20px;
	    color: white;
	    right: 100px;
	    text-align: end;
	    /*background: rgba(0,0,0,0.3);*/
	    padding: 1.5rem 3rem;
	    border-radius: 6px;
	}
	
	.Procategory_one_title h1{
		font-size: 3rem;
	    font-weight: bold;
	}

.Procategory_two{
	grid-area:Procategory_two;
	padding: 1rem 0 0;
}

.Procategory_three{
	grid-area:Procategory_three;
	padding: 2rem 0;
}

	.SubItmesCategory{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 1rem;
	}
	
	.ItemsImgCat{
		width: 100%;
		height: 260px;
		padding: 1.5rem;
	}

	.ItemsImgCat img{
		width: 100%;
		height: 100%;
		object-fit: scale-down;
	}

	.ItemsImg{
		max-width: 300px;
		height: 230px;
	}

	.ItemsTextCat{
		display: flex;
		justify-content: space-between;
		/* background: #27262505; */
		padding: 0.25rem 0.5rem;
	}	


	.ItemsImg img{
		width: 100%;
		height: 100%;
	}

	.SubItmesCategory2{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.SubItmesCategory2:hover, .SubItmesCategory:hover{
		box-shadow: 0px 0px 6px 1px #27DC0B;
		cursor: pointer;
	}

	.ItemsImg2{
		width: 100%;
		height: 260px;
	}

	.ItemsImg2 img{
		width: 100%;
		height: 100%;
		object-fit: scale-down;
		padding: 1rem;	
	}

	.ItmesCategoryList{
		padding: 5px 10px;
		margin-bottom: 0;
	}


	.ItmesCategoryList li{
		list-style: none;
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 600;
	}

	.ItmesCategoryList li:first-child{
		color: #26252788;
		font-weight: 800;		
	}

	.ItmesCategoryList li:last-child{
		color: #26252788;
		font-weight: 400;
	}

	.ItemsBtn{
		width: 33%;
		display: flex;
		justify-content: end;
		align-items: center;
		padding: 10px 5px;
	}

	.ItemsBtn a{
		min-width: 10%;
		padding: 0.3rem 0.52rem;
		margin: 0 3%;
		font-size: 12px;
		background: black;
		color: white;
		border:none;
		text-decoration: none;
		text-align: center; 
		border-radius: 100px;
	}

	.ItemsBtn a:hover{
		background: #27DC0B;
		/* color: ; */
	}

/*******************************************************************************************************************************/
/********************************************** ESTRUCTUTA DE LA PAGINA CART ***************************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoCart{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);	 
	grid-template-areas: "TitPage" "cart_one" "cart_two" "cart_three";
	width: 100%;
	position: relative;
	background: white;
}

.cart_one{
	grid-area: cart_one;
	width: 80%;
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
}

	.tableCart tr td:nth-child(1){
		display: flex;
		align-items: center;
	}
	.tableCart tr td:nth-child(4){
		color: red;
	}

	.tableCart tr td{
		padding:1rem 0.5rem; 
		vertical-align: baseline;	
	}

	.cartItemsDet{
		margin-bottom: 0;
		margin-left: 1rem;
		padding: 0;
	}

	.cartItemsDet li{
		list-style: none;
		padding: 0;
		margin: 0;
	}

	span.spinners {
		display: flex;
	    border-radius: 50px;
	    border: 1px solid #25262755;
	    width: fit-content;
	}

	span.spinners > .sub,
	span.spinners > .add {
		float: left;
		display: block;
		width: 30px;
		height: 35px;
		text-align: center;
		font-family: 'Poppins', sans-serif;
		font-weight: 500;
		font-size: 1.2em;
		line-height: 33px;
		color: #252627;
		cursor: pointer;
		transition: 0.1s linear;
		-o-transition: 0.1s linear;
		-ms-transition: 0.1s linear;
		-moz-transition: 0.1s linear;
		-webkit-transition: 0.1s linear;
	}

	span.spinners > .add {
		top: 0;
	}

	span.spinners > .sub{
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
	}

	span.spinners > .add {
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
	}

	span.spinners > .sub:hover{
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		background: #25262755;
	 	color: white;
	}

	span.spinners > .add:hover {
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		background: #25262755;
	  	color: white;
	}


	input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
	 	-webkit-appearance: none;
	}

	.itemsClose{
		border-radius: 50px;
		box-shadow: 0px 0px 12px 2px #26272522;
		padding:0.3rem 0.6rem;
		color: #25262755;
		font-weight: 500;
	}

	.cart_two{
		grid-area: cart_two;
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
		.cart_two a{
			font-size: 12px;
			text-decoration: none;
			border-radius: 50px;
			box-shadow: 0px 0px 12px 2px #26272522;
			padding:0.3rem 1.25rem;
		}
		.cart_two a:hover{
			background: black;
			color: white;
		}

	.cart_three{
		grid-area: cart_three;
		width: 80%;
		margin: 0 auto;
		padding-top: 0;
	}

		.cartTotal{
			width: 40%;
			float: right;
			background: #25262711;
		}

		.cartTotal h3{
			font-size: 1.5rem;
			width: 100%;
			border-bottom: 1px solid #25262755;
			padding-bottom: 0.5rem;
		}

		.tableCartItems{
			width: 100%;
			font-size: 12px;
			margin-bottom: 0 !important;
		}

		.tableCartItems tr{
			display: flex;
			justify-content: space-between;
		}

		.tableCartItems tr td{
			border:0px solid transparent;
			box-shadow: none;
			background: transparent;
		}

		.BtnTotates td{
			padding-top: 0rem !important;
		}

		.BtnTotates td:first-child{
			font-size: 13px;
			font-weight: bold;
		}

		.BtnTotates td:last-child{
			font-size: 18px;
			color: red;
		}

		.BtnPay a{
			display: block;
			background: black;
			color:white;
			padding:0.35rem 1.5rem;
			border-radius: 50px;
			border:0; 
			text-decoration: none;
			text-align: center;
		}

/*******************************************************************************************************************************/
/********************************************* ESTRUCTUTA DE LA PAGINA PAGOS ***************************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoPay{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);	 
	grid-template-areas: "TitPage" "pay_one" ;
	width: 100%;
	position: relative;
	background: white;
}

.pay_one{
	grid-area: pay_one;
	width: 90%;
	margin: 0 auto;
	padding-top: 0;
}

	.tab input {
		position: absolute;
		opacity: 0;
		z-index: -1;
	}

	.tabs {
		position: relative;
		border-radius: 8px;
		overflow: hidden;
	}

	.tab {
		width: 100%;
		color: #212529;
		overflow: hidden;
	}

	.tab-label {
	    display: flex;
	    justify-content: space-between;
	    padding: 0.5em 1rem 0;
	    border: 1px solid #2c3e5033;
	    cursor: pointer;
	    margin: 10px 0px;
	    border-radius: 25rem;
	    box-shadow: 0px 0px 12px -3px #25262744;
	}

	.tab-label:hover {
	  	background: white;
	}

	.tab-label::after {
		content: "❯";
		width: 1em;
		height: 1em;
		text-align: center;
		transition: all 0.35s;
	}

	.tab-content {
		padding: 0 1em;
		color: #2c3e50;
		background: white;
		transition: all 0.35s;
	}

	.tab-close {
		display: flex;
		justify-content: flex-end;
		padding: 1em;
		font-size: 0.75em;
		background: #2c3e50;
		cursor: pointer;
	}

	.tab-close:hover {
	 	background: white;
	}

	.tab input:checked + .tab-label {
		background: white;
	}

	.tab input:checked + .tab-label::after {
		transform: rotate(90deg);
	}

	.tab input:checked ~ .tab-content {
		padding: 1em;
	}

	.font-bold{
		box-shadow: 0px 0px 10px -2px #25262733; 
		border-radius: 50px; 
		padding: 0.4rem 1.5rem; 
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border:1px solid #25262733;
	}

	.font-bold h5{
		margin-bottom: 0;
	}

	.to-slide-metodo, .to-slide-pagos, .to-slide-metodo-send{
		display: none;
	}

	.to-slide-metodo.active, .to-slide-pagos.active, .to-slide-metodo-send.active{
		display: block;
	}

	.selects_pago, .selects_pago_send{
		width: 30% !important; 
		margin:1.7%; 
		cursor: pointer;
	}

	.selects_img{
		border-radius: 12px; 
		padding: 2rem; 
		box-shadow: 0px 0px 7px 0px #25262711;
		background: #25262733;
		border:1px solid #25262722;
	}

	.active .selects_img{
		background: #ffffff !important;
	}

	.selects_pago span, .selects_pago_send span{
		display: flex; 
		justify-content: center; 
		align-items: center; 
		font-size: 12px; 
		text-transform: uppercase; 
		font-weight: bold;
	}

	.method_pay {
		width: 46% !important;
		margin: 2% !important;
	}

	.method_pay{
		padding: 0.4rem 2rem;
		border-radius: 50px;
		text-align: center;
		cursor: pointer;
		display: block;
		background: #25262733;
		box-shadow: 0px 0px 9px -1px #25262733;
		border:1px solid #25262733;
	}

	.method_pay.active{
		background: white;
	}

	.listDir{
		box-shadow: 0px 0px 8px -1px #27262533; 
		border-radius: 12px;
		margin-bottom: 1rem;
		border:1px solid #25262722;
	}

	.listDir:hover{
		background: #25262733;
		cursor: pointer;
	}

	.checkboxList{
		display: flex; 
		justify-content: center;
		align-items: center;
		margin: 0 2.5%
	}

	.table-dir{
		font-size: 12px;
		margin-bottom: 0 !important;
	}

	.table-dir tr td{
		padding: .25rem 1rem;
		border:none;
	}

	.table-dir tr th{
		background: #25262711;
		padding: .25rem 1rem;
	}

	.form-fact{
		border-radius: 25px !important;
		background: #25262711 !important;
		margin-bottom: 0.5rem !important;
	}

	.company_delivery{
		width: 46% !important; 
		box-shadow: 0px 0px 9px 1px #25262733; 
		border-radius: 6px; 
		padding: 1rem 2rem; 
		margin: 1% 2% !important;
	}

	.company_delivery:hover{
		background: #25262733;
		cursor: pointer;
	}

	.btn-finish-orden{
		display: flex;
		justify-content: center;
		padding: 1rem;
	}
		.btn-finalizar{
			background: black;
			padding: 0.25rem 2rem;
			color:white;
			border-radius: 25rem;
			border:0;
		}

	.table-list-car{
		width: 100%;
	}

	.table-list-car tbody td{
		padding: 2px 0;
	}

		.table-list-car tbody td:nth-child(1){
			width: 75%;
		}
		
		.table-list-car tbody td:nth-child(2){
			width: 25%;
			text-align: right;
		}


	.SelectorPagos{
		display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    margin-bottom: 0.5rem;
	}

	.SelectorMultiPagos{
		display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 0.5rem;
	}

	.SelectorPagos span, .SelectorMultiPagos span{
		font-size:12px;
	}

	.SelectorPagos h3, .SelectorMultiPagos h3, .pay_multi h4, .pay_one h4{
		font-size: 1.25rem;
		color:#25262766;
		text-align: center;
	}

	.comentPay{
		color: blue;
		font-size: 12px;
		margin: 0.5rem 0;
	}

	.disflex{
		display: flex;
		align-items: center;
	}

	.Save-pay{
		display: none;
	}

	.btn-select{
		background: #25262733 !important; 
		border-radius: 12px !important; 
		margin-bottom: 10px;
	}

	.btn-select:hover{
		background: #000000 !important; 
		color:white !important;
	}

	.list-pay{
		display: flex;
		list-style: none;
	}

	.list-pay li{
		padding-right: 5px;
	}

	.Type_payment, .SelectZelle, .SelectBancos{
		height: 60px;
		width: 25%;
		padding: 0.5rem 0.76rem;
	    border-radius: 12px;
	    text-align: center;
	    cursor: pointer;
	    display: block;
	    background: #25262733;
	    box-shadow: 0px 0px 9px -1px #25262733;
	    border: 1px solid #25262733;
	    margin: 0px 5px;
		& img{
			object-fit: scale-down;
		}
	}

	.Type_payment.active, .SelectZelle.active, .Selectefectivo.active, .SelectBancos.active{
		background: white;
	}

	.registroPago{
		display: flex; justify-content: flex-end;
	}
	
	.registroPago button{
		background: #25262766;
		padding:0.4rem 1.75rem;
		border-radius: 25px;
		color: white;
		border: none;
	}

	.registroPago button:hover{
		background: black;
	}

	.pay_efectivo{
		display: flex;
		justify-content: space-between;
	}

		.Selectefectivo{
			padding: 0.3rem 0.70rem;
			background: #25262733;
		    box-shadow: 0px 0px 9px -1px #25262733;
		    border: 1px solid #25262711;
		    margin: 1.5% 3% 1.5% 0%;
		    border-radius: 25px;
		    cursor: pointer;		
		}

	.form-input-pay{
		width: 100%; margin: 1% 0; background: #c4c4c466; border: 0; border-radius: 25px; padding: 0.35rem 1.15rem;resize: none;
	}

	.data-account{
		box-shadow: 0px 0px 9px -3px #252627;
		border-radius: 12px;
		padding: 10px;
		margin-top: 0.5rem;
	}

	.modalDir{
		background: rgba(0,0,0,0.1);
	    height: 100%;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	}

	.modal-direccion{
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 60%;
	    box-shadow: 0px 0px 12px -3px #25262766;
	    background: white;
	    border-radius: 12px;
	}

	.btn-modal-close{ background: #f14d4d !important; }
	
	.btn-modal-close:hover{ background: #ca1212 !important; color: white !important; }

	.btn-modal-save{ background: #25262733 !important; }
	
	.btn-modal-save:hover{ background: black !important; color: white !important; }

/*******************************************************************************************************************************/
/*********************************** ESTRUCTUTA DE LA PAGINA PREGUNTAS FRECUENTES **********************************************/
/*******************************************************************************************************************************/

.ContenidoPreguntasFrecuentes{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, auto);	 
	grid-template-areas: "TitPage" "preguntas_one" "preguntas_two";
	width: 100%;
	position: relative;
	background: white;
}

.preguntas_one{
	grid-area: preguntas_one;
}

.preguntas_two{
	grid-area: preguntas_two;
}


/*******************************************************************************************************************************/
/********************************************** ESTRUCTUTA DE LA PAGINA LOGIN **************************************************/
/*******************************************************************************************************************************/

/* eliminar el navegador y footer */
.ContenidoLogin{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 70px repeat(2, auto);	 
	/*grid-template-areas: "navegador" "TitPageLogin" "login_one" "footer";*/
	grid-template-areas: "navegador" "login_one" "footer";
	width: 100%;
	position: relative;
	background: white;
}

.TitPageLogin {
	grid-area:TitPageLogin;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

	.TitPageLogin h2{
		font-weight: 600;
	}

.login_one{
	grid-area: login_one;
	width: 80%;
	margin: 0 auto;
}

	.login_content{
		padding: 0 1rem;
	}

	.login_content h3{
		text-align: center;
		font-weight: 600;
	}

	.login_content p{
		text-align: center;
		font-size: 12px;
		color: #d3d3d3
	}

	.login_content input{
		border-radius: 50px;
		background: #f6f7fb;
		border:none; 
		font-size: 12px;
		padding: .575rem 1rem
	}

	.login_content input:first-child{
		margin-right: 1rem;
	}

	.login_action{
		display: flex;
		justify-content: space-between;
		padding: 1rem 0;
	}

	.login_action a{
		text-decoration: none;
		color: #252627;
	}

	.login_action li{
		list-style: none;
		margin-right: 1rem;
	}

	.login_action input{
		margin-right: 0.5rem;
	}

	.login_button{
		display: flex;
		justify-content: space-between;
		padding-bottom: 1rem;
	}

		.login_button button{
			border-radius: 50px;
			background: black;
			color: white;
			padding:0.4rem 2rem; 
			font-size: 13px;
			width: 40%;
			border:0;
			text-transform: uppercase;
		}

		.login_button a{
			border-radius: 50px;
			background: #25262788;
			color: white;
			padding:0.4rem 2rem; 
			font-size: 13px;
			width: 40%;
			border:0;
			text-transform: uppercase;
			text-decoration: none;
			text-align: center;
		}

		.login_button a:hover{
			background: black;
			color: white;
		}

	.login_access{
		display: flex;
		justify-content: center;
		align-items: center;
		padding:1rem 0; 
	}

	.login_access a{
		margin:0 0.5rem;
		padding: 0.25rem 0.1rem;
		border-radius: 50px;
		box-shadow: 0px 0px 6px 4px #f4f4f4;
		text-align: center;
	}

	.login_access a img{
		width: 60%;
	}

/* generar estructura @mediaquery responsive para los dispositivos moviles */
@media (max-width: 768px) {
	.login_container{
		width: 100%;
	}
	.cont-padding, .ContenidosYield{
		padding: 1rem;
	}

	.Banheader{
		height: 50vh;
		 & img{
			object-fit: cover;
		 }
		 & .type1Content{
			width: 80%;
			left: 2rem;
			bottom: 1rem;
			& h3{
				font-size: 2.4vmax;
			}
		 }
	}

	.contenidoIndex{
		gap: 2.5rem;
	}

	.Pbl-slide .Pbl-items{
		height: 30vh;
		
		& img{
			object-fit: scale-down;
			aspect-ratio: 2 / 1;
		}
	} 

	.Items a{
		font-size: 1.4vmax;
		bottom: 0.5rem;
	}

	.Items:nth-child(1) {
		grid-area: 1 / 3 / 1 / 1;
	}
	.Items:nth-child(2) {
		grid-area: 2 / 1 / 2 / 3;
	}
	.Items:nth-child(3) {
		grid-area: 1 / 5 / 3 / 3;
	}
	.Items:nth-child(4) {
		grid-area: 5 / 1 / 3 / 3;
	}
	.Items:nth-child(5) {
		grid-area: 3 / 3 / 3 / 5;
	}
	.Items:nth-child(6) {
		grid-area: 4 / 3 / 5 / 5;
	}

	.sec{
		& img{
			object-fit: cover;
			aspect-ratio: 2 / 1;
		}
	}

	.sec:nth-child(2n) .TitCategory{
		justify-content: center;
		right: 2%;
		left: 2%;
		text-align: left;
	}

	.sec:nth-child(2n) .TitCategoryList{
		justify-content: start;
		width: 350px ;
	}
	.sec:nth-child(2n+1) .TitCategory{
		justify-content: center;
		right: 2%;
		left: 2%;
	}

	.structCat{
		padding: 1rem;
	}

	.footer{
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		grid-template-areas: "footerLeft" "footerRight" "footerLogo";
		gap: 1rem;
		
		& .footerRightredes{
			padding: 0;
			justify-content: center;
		}
	}

	.pay_one{
		width: 100%;
	}
}
@media (max-width: 576px) {
	.login_container{
		width: 100%;
	}
	.cont-padding{
		padding: 1rem;
	}

	.Banheader{
		& h3{
			font-size: 2.4vmax;
		}
	}
}
@media (max-width: 425px) {
	.login_container{
		width: 100%;
	}
}	
@media (max-width: 375px) {
	.login_container{
		width: 100%;
	}
}
@media (max-width: 320px) {
	.login_container{
		width: 100%;
	}
}