
.marcas-logos{
	width: 100%; margin: auto; text-align: center;
}

.marcas-logos>img{
	width: 150px;
}

.cat_titulo{
	font-family: calibri; font-weight: 500; font-size: 40px; margin-bottom: 20px; color: #333;
}

#categorias{
	display: none; max-width: 700px; text-align: center; margin: auto;
	padding: 0px 30px; padding-bottom: 30px;
}

#categorias>a{
	padding: 8px 12px; text-decoration: none; color: #666; font-family: calibri;
	transition: background-color 0.5s;
}
#categorias>a:hover{
	color: #fff; background-color: #666;
}

punto,punto2{
	font-size: 40px; font-weight: bold; color: #666;
}

punto2{display: none;}

/*---------------------------------------*/

.pedido-cat{
	margin: auto; margin-top: 10px; position: relative; text-align: center;
	font-family: calibri; font-size: 40px; color: #666; display: none;
}

.art-contenedor{
	max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: center;
	margin: auto; padding-bottom: 50px; align-items: flex-end;
}


.articulo{
	width: 250px; text-align: center; margin: 20px 20px; position: relative; border-radius: 10px;
	box-shadow: 0px 0px 7px rgb(240, 240, 240); padding: 10px; align-items: center; 
	border: 1px solid rgb(245, 245, 245); transition: all 0.2s; 
}

.articulo:hover{box-shadow: 0px 0px 9px rgb(210, 210, 210);}
		
.art-img{
	width: 125px; height: 200px; display: flex; align-items: center; justify-content: center; margin: auto; cursor: pointer;
}
.imagen{max-width: 125px; max-height: 200px;}

.art-info{
	font-family: calibri; font-size: 14px; padding-bottom: 0px;
	color: #999; height: 90px; display: flex; align-items: center;
}

.info-art{margin: auto;}

.art-prec{
	font-family: calibri; font-weight: bold; padding-bottom: 3px; color: #666;
}

.oferta{
	display: flex; flex-wrap: wrap;	justify-content: center;
}

.tachado{text-decoration: line-through;}

.ofer{
	position: absolute;
	background-color: rgb(255, 255, 0, 0.7); top: -10px; right: 15px; color: red; padding: 20px 10px;
	border: 4px solid red; border-radius: 50%; font-family: calibri; font-weight: bold;
}

.input{margin-bottom: 10px;}

.input>input{
	width: 30px; height: 30px; border: 1px solid #999; border-radius: 5px; text-align: center;
	font-family: calibri;
}

.btn-agregar{
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 5px;
	color: #fff;
	background-color: green;
}

.btn-agregar:hover{
	text-decoration: none;
	color: #fff;
	background-color: #57585d;
}

/*-------------------------------------------*/
.paginacion{
	position: relative;
	z-index: 2;
	margin: auto;
	margin-bottom: 60px;
	width: 220px;
	height: auto;
	background-color: rgb(255, 255, 255, 0.9);
	box-shadow: 1px 1px 8px #999;
	text-align: center;
	left: 50%;
	margin-left: -110px;
	align-items: center;
	justify-items: center;
	font-family: calibri;
}

.pag-info{
	padding-top: 0px;
	font-family: calibri;
	color: #666;
}

.pag-botones{
	padding-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.art-btn{margin-top: 5px;}
.art-btn>a{
	margin: 0px 5px;
	text-decoration: none;
	padding: 2px 10px;
	border-radius: 5px;
	color: #fff;
	/*font-weight: bold;*/
	background-color: #666;
}
.art-btn>a:hover{
	padding: 4px 10px;
}

.art-btn>a:active{
	background-color: black;
}

/*-------------------------------------*/

@media screen and (max-width: 768px){
	punto2{display:  inline-block;}
	salto{display: none;}
	.cat_titulo{display: flex;}
}

@media screen and (max-width: 600px){
	.paginacion{margin-bottom: 90px;}
}
