@charset "utf-8";
/* CSS Document */
body {
	margin: 0em auto;
	overflow-x: hidden;
    background-color:#fff;
	width:auto;
    padding: 0;
    margin: 0;

}

@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}


@font-face {
    font-family: "Roboto-Bold";
    src: url(../fonts/Roboto-Bold.ttf) format("truetype")
}


@font-face {
    font-family: "Dulcelin";
    src: url(../fonts/Dulcelin.otf) format("opentype")
}

@font-face {
    font-family: "AGALEGA-Regular";
    src: url(../fonts/AGALEGA-Regular.otf) format("opentype")
}



@font-face {
    font-family: "Bigdey_Demo";
    src: url(../fonts/Bigdey_Demo.ttf) format("truetype")
}


@font-face {
    font-family: "Sybelia_Demo";
    src: url(../fonts/Sybelia_Demo.ttf) format("truetype")
}



@font-face {
    font-family: "Victorious";
    src: url(../fonts/Victorious.ttf) format("truetype")
}



@font-face {
    font-family: "Abstrec_font_tfb";
    src: url(../fonts/Abstrec_font_tfb.ttf) format("truetype")
}


@font-face {
    font-family: "A_Love_of_Thunder";
    src: url(../fonts/A_Love_of_Thunder.ttf) format("truetype")
}


@font-face {
    font-family: "jennifer";
    src: url(../fonts/jennifer.ttf) format("truetype")
}


@font-face {
    font-family: "acid";
    src: url(../fonts/acid.otf) format("opentype")
}



@font-face {
    font-family: "Actonia_PERSONAL";
    src: url(../fonts/Actonia_PERSONAL.ttf) format("truetype")
}


@font-face {
    font-family: "pompadour1";
    src: url(../fonts/pompadour1.ttf) format("truetype")
}




@font-face {
    font-family: "ATypewriterForMe";
    src: url(../fonts/ATypewriterForMe.ttf) format("truetype")
}

@font-face {
    font-family: "yonky";
    src: url(../fonts/yonky.ttf) format("truetype")
}


@font-face {
    font-family: "elegant";
    src: url(../fonts/elegant.ttf) format("truetype")
}



@font-face {
    font-family: "helvelLig";
    src: url(../fonts/helvelLig.otf) format("opentype")
}

a {
    text-decoration: none;
    color: #000;
}




h1 {
    font-family: "Roboto-Bold";
    font-weight: 900
}

h2 {
    font-family: "Roboto-Light";
    font-weight: 900
}

h3 {
    font-family: "Dulcelin";
}

p {
    font-family: "Roboto-Light"
}



#formPedido{
	background: rgba(0,0,0,0.9);
	position: relative;
	top: 70px;
	height: auto;
	width: 350px;
	right: -350px;
	position: fixed;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
 	transition: all 0.5s ease;
	 z-index: 100000;
}
.img2Pedido{position:absolute; display:inline-block; width:50px; height:auto; left:-50px; top:345px; cursor:pointer}
.btnBack{position:absolute; display:inline-block; width:40px; height:auto; right:20px; top:-50px; cursor: pointer;}
.btnPedido{position: relative; display: block; margin-left: auto; margin-right: auto; padding: 10px; width: 100px; top: -20px;}


#capaIniBody{
	position:relative; width:100%; height:300px;   background-color:#fff; 
}

	.fila1Capa3Body{
		position:absolute;
		width:100%;
		height:110%;
		background-color:#000;
		background-image:url(../imagenes/encab3.jpg);
		-moz-background-size: cover;
    	-webkit-background-size: cover;
    	-o-background-size: cover;
		overflow:hidden
	}
	
	
			.txt1Capa3Body{
				position:absolute; width:100%; text-align:left;left:100px;  font-size:4.5em; top:0px; color:#fff;
			}
			
			.diseno{
				position:absolute;
				top:0px;
				right:0px;
				width:600px; height:auto
			}
			
			.txt2Capa3Body{
				position:absolute; width:40%; text-align:left; left:100px;  font-size:2em; top:130px; color:#fff; 
			}
	

#capaAd1{
	position:relative; width:100%; height:50px;  background-color:#FFF	
}

	.txt{ position:relative;  font-size:3em; padding-top:20px; font-family: "Roboto-Light"; color:#bc3d3d
	}
	
	.txt2{ position:relative;  font-size:1.5em; padding-top:0px; width:60%;  
	}
	
	.linea{position:relative;	background-color:#000; width:200px; height:0.5px; border-color:#000; top:-5px
	}



#capa2Body{
	position:relative;
	width:100%; 
	height:auto;
	background-color:#fff;
	-moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;	
}

.fila1Capa2Body{position: relative; width: 100%; height: 50px;}


/*********************IMAGENES TIENDA********************/
	.celda{float:left; width:25%; height:auto;}

.imgCeldaGaleria{position:relative; width:95%; height:auto;   display: block; background-color: #f5f5f4;-webkit-transition: all 0.5s ease;/**AQUI**/
        -moz-transition: all 0.5s ease;/**AQUI**/
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease; border-radius: 20px; }

		.imgCeldaGaleria:hover{
			transform: scale(1.05);
		}
	
	.imgProdu{position: relative; display: block; margin-left: auto; margin-right:auto; width: 250px; height: auto;}
	
	.txtFoto{position:relative; color: #fff; width:100%; background:rgba(98,98,100,0.9); height:auto;  text-align:center;  font-family: "Roboto-Light"; font-size:1.2em;}
	.cantida{position:relative; margin-left: auto; margin-right: auto; width:40px; height:40px; text-align: center; outline: none; background-color: #fff; border: none;}
	.colorA{position:relative;  width:10px; height:30px; visibility: visible; }
	.colorB{position:relative;  width:40px; height:40px; background-color: #fff; outline: none; border: none; background-repeat: no-repeat; background-size: cover; }
	.colorC{position:relative;resize: none; text-align: center; top: 10px;  width:100px; height:30px; background-color: #fff; outline: none; border: none; background-color: transparent; }

	/*propeidadesd e los botones de interacion carrito*/
	.enlaces{position: relative; text-align: center;}
	.vistaFoto{  width:40px; height:auto; position:relative;  }
		.vistaFoto:hover{
			background-color: aquamarine;
		}

	.vistaFoto2{  width:40px; height:auto; position:relative;  }
		.vistaFoto2:hover{
			background-color: aquamarine;

		}


	.vistaFoto3{   width:35px; height:auto;  position:relative;  }

	.txtResultados{padding-left: 30px; font-size: 0.9em;}

	.precioX{background-color: transparent; border:none; color: #fff; font-size: 1em; width: 80px; }

	

/*********************INICIAO SCROLLAO********************/
			
				#global {
					display:block;
					margin-left:5%;
					margin-right:5%;/**/
					height: auto;
					width:92%;
					overflow-y: scroll;
					overflow-x: hidden;
					top:10px;
					position:relative;
				}
				
				#global::-webkit-scrollbar-track
				{
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
					background-color: #F5F5F5;
				}
				
				#global::-webkit-scrollbar
				{
					width:15px;
					background-color: #F5F5F5;
				}
				
				#global::-webkit-scrollbar-thumb
				{
					border-radius: 10px;
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
					background-color: #D62929;
				}
				
				/************************FIN SCROLL****************************/
/*********************INICIAO SCROLLAO********************/
			
#global2 {
	display:block;
	margin-left:auto;
	margin-right:auto;
	height: 210px;
	width:95%;
	overflow-y: scroll;
	overflow-x: hidden;
	top:10px;
	position:relative;
}

#global2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#global2::-webkit-scrollbar
{
	width:5px;
	background-color: #F5F5F5;
}

#global2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/************************FIN SCROLL*******				
				
/*********************INICIAO SCROLLAO********************/
			
#global3 {
	display:block;
	margin-left:auto;
	margin-right:auto;
	height: 270px;
	width:95%;
	overflow-y: scroll;
	overflow-x: hidden;
	top:0px;
	position:relative;
	background-color: #fff;
}

#global2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#global2::-webkit-scrollbar
{
	width:5px;
	background-color: #F5F5F5;
}

#global2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/************************FIN SCROLL*******								
				
			/****************************INICIO MASCARA MODAL******************/		
							
			/* The Modal (background) */
				
				.modalmask {
				position: fixed;
				font-family: Arial, sans-serif;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.9);
				z-index: 99999;
				opacity:0;
				-moz-opacity: 0;
                 filter: alpha(opacity=0);
				
				-webkit-transition: opacity 400ms ease-in;
				-moz-transition: opacity 400ms ease-in;
				transition: opacity 400ms ease-in;
				pointer-events: none;
				}

				.modalmask:target {
					opacity:1;
					-moz-opacity: 0.1;
                    filter: alpha(opacity=1);
					pointer-events: auto;
				}
				
				
				
				.rotate {
				margin: 6% auto;
			
				}
				
				
				.modalmask:target .rotate{		
				transform: rotate(360deg) scale(1,1);
       			 -webkit-transform: rotate(360deg) scale(1,1);
				  -moz-transform: rotate(360deg) scale(1,1);
				}
				

				
				
				.close {
				background:#F00;
				color: #FFFFFF;
				line-height: 25px;
				position: absolute;
				right: -10px;
				text-align: center;
				top: -20px;
				left:1150px;
				width: 24px;
				text-decoration: none;
				font-weight: bold;
				border-radius:3px;
				z-index:10;
					border:1px solid #FFF;
			
				}

				.close:hover { 
					background: #000; 
					color:#F00;
				}
			/*Ejemplo de aplicaicon de estilo a un elemento lllamado four hr.style-four*/
			#imgFoto{position:relative; width:auto; height:75%;  top:5px;}
			#fotoModal{width:auto; height:500px;}
			/*************FIN MASCARA MODAL*******/


.contenedor-celdas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* o flex-start para alineación izquierda */
  gap: 20px; /* Espacio entre celdas */
}

.celda {
  width: 30%;
  min-width: 250px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* Ajuste para pantallas pequeñas */
@media screen and (max-width: 900px) {
  .celda {
    width: 45%;
  }
}

@media screen and (max-width: 600px) {
  .celda {
    width: 90%;
  }
}



/*Celular portrait*/
@media screen and (min-width: 1px) and (max-width: 360px) {
#S1{display:inline}

#capaIniBody{
	height:180px;
}

.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:2.5em; top: 10px;}
.txt2Capa3Body{ width:30%; text-align:left; left:10px;  font-size:1em; top:120px; color:#fff;}	
		.diseno{
			display:none
			
		}
		
#capaAd1{position:relative; width:100%; height:100px;  background-color:#FFF}
	.txt{ font-size:2em; padding-top:10px}
	.txt2{  width:90%;}

#capa2Body{height:auto}

#global {width:100%;left:0px;height:auto}


.celda{position:relative;width:100%;height:auto;padding-left:0px;}
.imgCeldaGaleria{ width:100%;}
				
	.close {left:0px;width: 100%;}
			
	/*Ejemplo de aplicaicon de estilo a un elemento lllamado four hr.style-four*/
	#imgFoto{position:relative; width:100%; }
	#fotoModal{width:100%; height:auto; padding-top:10px}
	/*************FIN MASCARA MODAL*******/
	#fotoModal2{display: block; margin-left: auto; margin-right: auto; width:100%; height:auto; padding-top:10px}


}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {
#S2{display:inline}

#capaIniBody{
	height:200px;
	
}

	
.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:2em; top: 40px;}
.txt2Capa3Body{ width:30%; text-align:left; left:10px;  font-size:1em; top:130px; color:#fff;}	
		.diseno{
			display:none
			
		}


#capaAd1{
	position:relative; width:100%; height:150px;  background-color:#FFF	
}

	.txt{ font-size:2.5em; padding-top:20px  
	}
	
	.txt2{  width:90%; font-size:1.6em
	}

#capa2Body{height:auto}

#global {
	width:100%;
	left:0px;
	}

	
	.celda{position:relative;width:100%;height:auto;padding-left:0px;}
	.imgCeldaGaleria{ width:100%;}


				.close {
				left:0px;
				width: 100%;
				}
			
			/*Ejemplo de aplicaicon de estilo a un elemento lllamado four hr.style-four*/
			#imgFoto{position:relative; width:100%; }
			#fotoModal{width:100%; height:auto; padding-top:10px; }
			/*************FIN MASCARA MODAL*******/
			#fotoModal2{display: block; margin-left: auto; margin-right: auto; width:100%; height:auto; padding-top:10px}
}

/*tablet 7.1 portrait*/
@media screen and (min-width: 641px) and (max-width: 960px) {
#S3{display:inline}

	#capaIniBody{
		height:300px;
		
	}

		
.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:2.5em; top: 160px;}
.txt2Capa3Body{ width:30%; text-align:left; left:10px;  font-size:1em; top:230px; color:#fff;}	
		.diseno{
			display:none
			
		}
		
		
		
#capaAd1{
	position:relative; width:100%; height:200px;  background-color:#FFF	
}

	.txt{ font-size:3em; padding-top:80px  
	}
	
	.txt2{  width:90%; font-size:2em
	}


#global {
	width:100%;
	left:0px;
	}

.celda{position:relative;width:100%;height:auto;padding-left:0px;}
.imgCeldaGaleria{ width:100%;}

			.close {
				left:0px;
				width: 60%;
				margin-left:auto;
				margin-right:auto;
				z-index:50000
				}
			
			/*Ejemplo de aplicaicon de estilo a un elemento lllamado four hr.style-four*/
			#imgFoto{position:relative; width:100%; }
			#fotoModal{width:45%; height:auto; padding-top:10px; }
			/*************FIN MASCARA MODAL*******/


}

/*tablet 7.1 landscape se puede utilizer las medidas iniciales*/
@media screen and (min-width: 961px) and (max-width: 1210px) {
#S4{display:inline}

#capaIniBody{
	height:200px;
	
}

	
.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:2.5em; top: 60px;}
.txt2Capa3Body{ width:30%; text-align:left; left:10px;  font-size:1em; top:130px; color:#fff;}	
	.diseno{
		display:none
		
	}
	
		
		
#capaAd1{
	position:relative; width:100%; height:200px;  background-color:#FFF	
}

	.txt{ font-size:3em; padding-top:80px  
	}
	
	.txt2{  width:90%; font-size:2em
	}


#global {
	width:100%;
	left:0px;
	}

			.close {
				left:0px;
				width: 50%;
				margin-left:auto;
				margin-right:auto
				}
	#fotoModal{width:auto; height:100%; padding-top:20px}
}

/*pantallas grandes*/
@media screen and (min-width: 1211x) and (max-width: 2000px) {
#S5{display:inline}
#global {
	width:100%;
	left:0px;
	}



}