* { 
	box-sizing: border-box; 
	margin: 0;
	padding: 0;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#landing-miniso {
    /* font-family: "FuturaBT-BoldCondensed"; */
    color: #000000;
    margin-top: -30px;
}







.header-mac {
    width: 100%;
    text-align: center;
}

.block1-header {
    width: 100%;
    background-color: #000;
    margin-bottom: 0px;
    padding-bottom: 0px;
}


.block2-header {
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}



div.block1-header > img {
    width: 10%;
}


.subtitulo-mac {
    font-size: 44px;
    font-weight: 900;
}

.descrip-mac {
    width: 100%;
    margin-top: 1%;
    font-size: 19px;
    font-weight: 400;
}

.text-marcado-mac {
    font-weight: 600;
}




.filters {
    width: 100%;
    text-align: center;
}

.fil-color{
	margin: 2% 0%;
}

.mobile-filter{
	display: none;
}

.filter-block {
    width: 100%;
    margin-left: 0%;
}


/* .filter-block {
    width: 80%;
    margin-left: 10%;
} */



/* ---- button ---- */

.button {
  display: inline-block;
  /* padding: 0.5em 1%; */
  padding: 5px 0.5em 6px;
  /* background: #EEE; */
  border: none;
  /* border-radius: 7px; */
  /* background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); */
  color: #222;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
  border-bottom: 1px solid #c7c7c7;
  background-color: #fff;
  color: #c7c7c7;
  font-weight: 500;
}

.button:hover {
  /* background-color: #8CF; */
  border-bottom: 1px solid;
  /* text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); */
  color: #222;
}

.button:active,
.button.is-checked {
  /* background-color: #28F; */
  border-bottom: 1px solid;
  color: #222;
}

.button.is-checked {
  /* color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); */
}

.button:active {
  /* box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8); */
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  /* float: left; */
  border-radius: 0;
  margin-left: 0;
  outline: none;
  display: block;
  /* margin-right: 1px; */
}

.fil-color {
    margin: 1% 0% 2% 0%;
}

.ui-group.fil-todo {
    margin-left: 4%;
}

button.button.refresh-general {
    color: #000;
    border: 0;
}

/* .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; } */

/* ---- isotope ---- */

.grid {
  /* background: #EEE; */
  max-width: 100%;
}

.grid {
	position: relative;
	width: 100%;
	opacity: 0;
	transition: opacity 0.5s linear 1s;
}

.grid.imagenes-cargadas {
	opacity: 1;
}

.grid .item {
    position: initial !important;
    /* display: block; */
    padding: 0;
    /* margin: 10px; */
    /* width: calc(33.33% - 20px); */
	width: 14.28%;
	/* height: auto; */
	/* height: 202px; */
}

.grid .item-contenido {
    position: relative;
}



.item-contenido > a > div{
	position: absolute;
	bottom: 0;
	left: 0;
	color: #000;
	margin-bottom: 5px;
	font-family: sans-serif;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: visibility 0s, opacity 0.5s linear; 
	transition: visibility 0s, opacity 0.5s linear;

}

.item-contenido > a:hover div{
	width: 150px;
	padding: 8px 15px;
	visibility: visible;
	opacity: 0.7; 
   }
   


.grid .item img {
    /* width: 100%; */
    cursor: pointer;
    vertical-align: top;
	width: 100%;
	
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ui group */

.ui-group {
  display: inline-block;
}

.ui-group h3 {
  display: inline-block;
  /* margin-right: 0.2em; */
  font-size: 16px;
}

.ui-group .button-group {
	display: flex;
	width: 100%;
  /* display: inline-block; */
  /* margin-right: 20px; */
}

.titulo-filtro {
    /* display: flex; */
	padding: 1% 0%;
	margin-right: 8px;
    /* vertical-align: middle; */
}

.ui-group.fil-piel {
    width: 30%;
}

.ui-group.fil-acabado {
    width: 45%;
}

div.ui-group.fil-piel > div > div.titulo-filtro {
	padding: 2.5% 0%;
	display: block;
}


/* color-shape */

.color-shape {
  /* width: 70px; */
  /* height: 100vh; */
  /* margin: 5px; */
  float: left;
  z-index: 9;
}
 
.color-shape.round {
  border-radius: 35px;
}
 
.color-shape.big.round {
  border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }


.footer {
    display: grid !important;
    width: 100% !important;
}


/* ------------------------- */
/* Pantalla  mayores a 1450px */
/* ------------------------- */
@media screen and (min-width: 1450px) {

	.filter-block {
    width: 84%;
    margin-left: 8%;
	}

	/* .grid .item {
		
		height: 220px;
	} */

}


@media screen and (min-width: 1660px) {


	/* .grid .item {
		
		height: 260px;
	} */

}






/* ------------------------- */
/* IPAD 1024 */
/* ------------------------- */
@media screen and (max-width: 1040px) {

	.ui-group {
		display: inline-block;
		width: 100%;
	}

	.ui-group .button-group {
		display: flex;
		/* display: inline-block; */
		justify-content: center;
		margin-right: 0px;
		width: 100%;
	}

	.ui-group h3 {
		display: inline-block;
		/* margin-right: 0.2em; */
		font-size: 15px;
	}
	.button {
		
		font-size: 14px;
		
	}

	div.ui-group.fil-piel > div > div.titulo-filtro {
		padding: 1% 0%;
	}

	.ui-group.fil-acabado {
		margin-top: 1%;
	}

	.ui-group.fil-piel {
		width: 100%;
	}

	.ui-group.fil-acabado {
		width: 100%;
	}
	


}



/* -------------------.------ */
/* Pantalla 1400*/
/* ------------------------- */
@media screen and (min-width: 1400px) {

	/* .grid .item {
	
		height: 200px !important;
	
	} */
}


/* -------------------.------ */
/* IPAD 1300*/
/* ------------------------- */
@media screen and (max-width: 1380px) {

	/* .grid .item {
	
		height: 190px !important;
	
	} */

	/* .item-contenido {
		height: 190px;
	} */
}




/* -------------------.------ */
/* IPAD 1024*/
/* ------------------------- */
@media screen and (min-width: 900px) {

/* .grid .item {

    height: 132px;

} */
}



/* -------------------.------ */
/* IPAD */
/* ------------------------- */
@media screen and (max-width: 780px) {
	div.block1-header > img {
		width: 16%;
	}
	.subtitulo-mac {
		font-size: 32px;
		font-weight: 900;
	}
	.descrip-mac {
		font-size: 18px;
		padding: 0% 4%;
	}
	.grid .item {
		
		width: 20%;
	}

	.button {
		display: inline-block;
		/* padding: 1% 2%; */
		
		font-size: 14px;
		
	}
	.ui-group h3 {

		/* margin-right: 0.2em; */
		font-size: 14px;
	}
}


/* -------------------.------ */
/* IPAD 768*/
/* ------------------------- */
@media screen and (min-width: 660px) {

	/* .grid .item {
	
		height: 132px;
	
	} */
}


/* ------------------------- */
/* MOBILE */
/* ------------------------- */

@media screen and (max-width: 480px) {
	div.block1-header > img {
		width: 26%;
	}
	.categorias-mobile{
		display: block;
	}
	.categorias{
		display: none !important;
	}

	div.opcion-color > a {
		width: 33%;
		padding: 2% 8%;
	}
	.filtro-color {
		margin-bottom: 3%;
		padding: 0% 4%;
		margin-top: 4%;
	}
	.opcion-fin {
		text-align: center;
		margin-top: 3%;
		margin-bottom: 5%;
	}
	header .categorias-mobile a {
		color: #9B9B9B;
		/* margin: 10px 20px; */
		font-size: 18px;
		font-weight: 700;
	}
	.opcion-color {
		text-align: center;
	}
	.subtitulo-mac {
		font-size: 28px;
		margin-top: 3%;
		font-weight: 900;
	}
	.grid .item {
		width: calc(50%);
	}

	.mobile-filter{
		display: block !important;
	}

	.desktop-filter{
		display: none !important;
	}

	.filter-menu-mobile {
		display: flex;
		text-align: center;
		justify-content: center;
	}
	.titulo-filtro {
		/* display: flex; */
		padding: 4% 3%;
		margin-right: 0px;
		width: 100%;
		font-size: 14px;
		font-weight: 500;
		color: #c7c7c7;
		border-bottom: 1px solid #c7c7c7;
		/* vertical-align: middle; */
	}
	button.titulo-filtro {
		border: 0px;
		border-bottom: 1px solid #c7c7c7;
		background-color: #fff;
		outline: none;
	}

	button.titulo-filtro:hover  {
		background-color: #fff;
		border-bottom: 1px solid;
		/* text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); */
		color: #222;
	}

	/* button.but-mobile {
		padding: 4% 3%;
		background-color: #fff;
		border: none;
		width: 25%;
	} */
	
	button.but-mobile {
		padding: 4% 46px;

		background-color: #fff;
		border: none;
		/* margin-left: 2%; */
		/* width: 50%; */
		/* display: inline-block; */
		flex: 0 0 auto;
	}

	.button-group .button {
		/* float: left; */
		display: flex;
		/* margin-right: 1px; */
	}

	.color-budle > .img-color > img {
		width: 60%;
	}

	.color-budle {
		padding: 4% 32px;
	}

	button.but-mobile {
		padding: 4% 32px;
		
	}
	

	.ui-group .button-group {
		display: flex;
		/* display: inline-block; */
		justify-content: left;
		margin-right: 0px;
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		/* left: 8%; */
		/* page-break-after: always; */
	}

	button.titulo-filtro:active,
	button.titulo-filtro.is-checked  {
		/* background-color: #8CF; */
		border-bottom: 1px solid;
		/* text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); */
		color: #222;
	}

	.ocult-fil{
		display: none;
	}

	.ui-group.fil-acabado {
		margin-top: 0%;
		margin-bottom: 0%;
	}

	.fil-color {
		margin: 0% 0% 0% 0%;
	}

	/* .grid .item {
	
		height: 200px !important;
	
	} */



}





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


	button.but-mobile {
		padding: 4% 40px;

	}

	button.but-mobile {
		padding: 4% 26px;
	}

	/* .grid .item {
	
		height: 180px !important;
	
	} */

}


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


	button.but-mobile {
		padding: 4% 40px;

	}

	button.but-mobile{
		padding: 4% 18px;
	}

	/* .grid .item {
	
		height: 156px !important;
	
	} */

}









/* -------------------.------ */
/* MOBILE mayores 310PX mayor*/
/* ------------------------- */
@media screen and (min-width: 310px) {

	/* .grid .item {
	
		height: 160px;
	
	} */
}