/*
 Set a max-width 62.5em; 1000px for the last breakpoint to prevent too much stretching on large screens.
 By setting the max-width equal to the breakpoint width minus padding we keep square tiles.
.listing {
	max-width: 62.5em; //X Reduce el area del grid
	margin: 0 auto;	//
}
.ui-li-aside		.item-price
.ui-btn				a
.ui-li-has-thumb	li
 */
/*grid-template-rows: repeat(4, 1fr);
*/
:root {
	--sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--radio: calc(calc(104vmin / 3));
--width: calc(var(--radio) * .866);
--height: var(--radio);
    /* colors */
    --cRelieve: #ccc; /**/
    --cEtiqueta: #009999; /*#33ccff,#990099*/
    --cEtiquetaR: 0; /*#33ccff,153*/
    --cEtiquetaG: 153; /*#33ccff,0*/
    --cEtiquetaB: 153; /*#33ccff,153*/
    --negroO: #1d1f20;
    --negroM: #292f33;/*navy;Fondo Header*/
    --negroC: #226;/*#444448; Fondo hexágono*/
    --gris: #bbb; /*Letra hexágono*/
    --blancoS: #e1e8ed;
}
/*
font-size: 1rem;
color: var(--gris)
*/
html {
	box-sizing: border-box;
	font-family: var(--sinSerif);
}
/*
	overflow-x: scroll;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
*/
body {
	background: var(--negroO);
}

.listing {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-gap: 16px;
 padding: 0 10px 0 10px;
}

/* A bit custom styling
.listing li p {
	color: #eee;
}
.listing li .item-price {
	color: #eee;
}
*/
	.listing li:hover {
		-moz-box-shadow: 0px 0px 12px var(--cEtiqueta);
		-webkit-box-shadow: 0px 0px 12px var(--cEtiqueta);
		box-shadow: 0px 0px 12px var(--cEtiqueta);
	}
	/* Set a max-width 62.5em; 1000px for the last breakpoint to prevent too much stretching on large screens.
	By setting the max-width equal to the breakpoint width minus padding we keep square tiles.
	.listing {
		max-width: 62.5em;
		margin: 0 auto;
	} */
	/* 10px
	.wrapper {
		padding: .625em; 
	} */
	/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
	but we stick to percentage values for demo purposes.*/
/*
		width: 23%;
		margin: .625em 1%;
*/
	.listing li {
		position: relative; /*Para colocar la imagen de fondo*/
		height: 230px;
	color: #eee;
	}
	/* include padding and border in height so we can set it to 100% */
	.listing li > a {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
	}
	.listing .grid-item {
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	}
	/* To keep aspect ratio.
 clip-path: circle(50%);
	*/
	.grid-item > a > .item-img {
 position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
		height: auto;
		min-width: 100%;
		min-height: 100%;
	}
	/* Make all list items and anchors inherit the border-radius from the UL. */
	.listing li,
	.listing li a,
	.listing .item-img {
		-webkit-border-radius: inherit;
		border-radius: inherit;
	}
	/* Hide the icon */
	.listing .ui-icon:after {
		display: none;
	}
	/* Make text wrap. */
	.listing li > h2,
	.listing li > p {
		width: auto;
		white-space: normal;
		overflow: visible;
		position: absolute;
		left: 0;
		right: 0;
	}
	/* Text position */
	.listing h2 {
		font-size: 1.25em;
		margin: 6.5em -10px 0 -10px;
		padding: .125em 1em;
		bottom: 50%;
	}
	.listing p {
		font-size: 1em;
		margin: 0 -10px 0 -10px;
/*
*/
		padding: 0 1.25em;
		min-height: 50%;
		bottom: 0;
	}
	/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
	.listing li h2,
	.listing li p {
		background: #111;
		background: rgba(100,100,100,0.5);
	}
	.listing li h2 {
		bottom: 35%;
	}
	.listing li p {
		min-height: 35%;
	}
	/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
	.listing .item-price {
/*		padding: .125em .625em;*/
		width: auto;
		min-height: 0;
		top: 0;
		left: auto;
		bottom: auto;
		/* Custom styling. */
		background:  var(--cEtiqueta);
		background: rgba(var(--cEtiquetaR),var(--cEtiquetaG),var(--cEtiquetaB),.85);
		-webkit-border-top-right-radius: 8px;
		border-top-right-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
		border-bottom-left-radius: 8px;
		-webkit-border-bottom-right-radius: 0;
		border-bottom-right-radius: 0;
font-weight: 400;
/*
display: block;
text-overflow: ellipsis
margin: .6em 0;
*/
	}
/*
  position: -webkit-sticky;
  position: sticky;
*/
	.grid-item > a > .item-price {
		position: absolute;
		top: 0;
		right: 10px; /*compensación del margen p*/
		text-align: right;
	}
	/*Sombra para cada item*/
	.listing li {
		-moz-box-shadow: 0px 0px 9px var(--cRelieve);
		-webkit-box-shadow: 0px 0px 9px var(--cRelieve);
		box-shadow: 0px 0px 9px var(--cRelieve);
	}
	/* Animate focus and hover style, and resizing. */
	.listing li,
	.listing a {
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		transition: all 500ms ease;
 color:#fff;
 text-shadow: 0 2px 0 #222;
 text-decoration: none;
	}
/*
.item-key{
 font-size:30px;
 font-family:verdana;
}
.item-price {
 font-size:20px;
}
*/
.item-desc{
 font-size:22px;
}

.item-img {
 max-width: 85px;
 max-height:85px;
}

.grid-item {
 background-color: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(18, 82, 192, 0.8);
 padding: 10px;
/* font-size: 30px;
 text-align: center;
*/
 list-style-type: none;
}

@media only screen and (max-width: 1080px) {
 .listing {grid-template-columns: repeat(3, 1fr);}
 .item-desc {font-size: 28px;}
}
@media only All and (max-width: 700px) {
 .listing {
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 4px;
 }
 .grid-item > a > .item-img {
	min-height: 5em;
	min-width: 5em;
 }
/*	font-size: 1.25em;
	margin: 6.5em -10px 0 -10px;
	padding: .125em 1em;
	bottom: 50%;*/
 .listing h2 {
	margin: -10px -10px 0 4em;
 }
 .listing li {
	height: 5em;
 }
/*
	font-size: 1em;
	padding: 0 1.25em;
	min-height: 50%;
	bottom: 0;
*/
 .listing p {
	margin: 0 -10px 0 5em;
 }
/* Text position
	margin: 6.5em -10px 0 -10px;
	padding: .125em 1em;
		bottom: 50%;
		font-size: 2em;
*/
 .listing h2 {
	padding: 1em 1em;
 }
 .listing li p {
	min-height: 2.5em;
 }
}