.jmenuxs {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  height: 60px;
	  z-index: 4;
	  padding: 0;
	  margin: 0;

	  display: grid;
	  grid-template-columns: 50px 50px 1fr 50px 50px;
		border-bottom: 1px solid #eee;
	  background: #fff;
		
	  line-height: 60px;
		text-align: center;
	  list-style: none;
	}
		.jmenuxs li {
			height: 60px;
			line-height: 60px;
			padding: 0;
		}
			.jmenuxs button {
				width: 100%;
				background: none;
				padding: 0;
				border: 0;
				color: #333;
				text-align: center;
				font-size: 20px;
			}
			.jmenuxs .logo {
				font-size: 40px;
			}


/*
========================================================================================================================
JMENU
========================================================================================================================
Cabecera principal de la página con el header (menú secundario) y el nav (menú principal)                             */

body:not(.navxs) {
	/*padding-top: 125px; SMALL */
	padding-top: 110px;
}
body:not(.navxs) .jmenu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	display: grid;
	grid-template-areas:
		'header'
		'nav'
	;
}
	/* Ocultamos los botones de cabecera y "Cerrar" */
	body:not(.navxs) .jmenu > button {
		display: none;
	}
	.jmenu ul {
		padding: 0;
		margin: 0;
		font-family: 'Roboto', sans-serif;
		list-style: none;
	}


header {
	padding: 0 30px;
	background: #fff;
	border-bottom: 1px solid #eee;
	position: relative;
	z-index: 2;
	grid-area: header;
}
	header > ul {
		display: grid;
		grid-template-columns: 1fr auto auto auto auto auto auto;
		grid-gap: 15px;
		font-size: 12px;
		font-weight: 600;
	}
		header a,
		header button {
			display: inline-block;
			padding: 8px;
			color: #333;
			background: none;
			border: 0;
			text-transform: uppercase;
			letter-spacing: 2px;
		}
			header a:hover,
			header button:hover {
				background: #fff;
				color: #000;
				text-decoration: underline;
			}

		header .idioma {
			position: relative;
		}
			body:not(.navxs) header .idioma:hover > button {
				background: #333;
				color: #fff;
				text-decoration: none;
			}

			body:not(.navxs) header .idioma ul {
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX( -48% );
				padding: 15px;
				background: #333;
				pointer-events: none;
				opacity: 0;
				transition: all .3s ease;
			}
			body:not(.navxs) header .idioma:hover ul {
				transform: translateX( -50% );
				opacity: 1;
				pointer-events: auto;
			}
				body:not(.navxs) header .idioma ul li {
					text-align: center;
				}
					body:not(.navxs) header .idioma ul a {
						color: #fff;
					}
					body:not(.navxs) header .idioma ul a:hover {
						background: #333;
						color: #fff;
						text-decoration: underline;
					}


				header .venta-privada button,
				header .venta-privada:hover button {
					background: #f50057;
					color: #fff !important;
				}



nav {
	background: #fafafa;
	padding: 0 30px;
	border-bottom: 1px solid #eee;
	position: relative;
	z-index: 1;
	grid-area: nav;
}
	nav > ul {
		display: grid;
		grid-template-areas: 'logo catalogo buscador favoritos cesta';
		grid-template-columns: auto 1fr auto auto auto;
		grid-gap: 20px;
	}
		nav .logo {
			grid-area: logo;
	    /*font-size: 60px; SMALL */
	    font-size: 50px;
	    align-self: center;
		}
			nav .icon-logo:before {
		    color: #21438e !important;
			}

		nav .catalogo {
			grid-area: catalogo;
			align-self: end;
		}
			nav .catalogo > ul {
				display: grid;
				/*
					IMPORTANTE! SI MODIFICAMOS EL NÚMERO DE ELEMENTOS DEL MENÚ PRINCIPAL, TENEMOS QUE CAMBIAR ESTE NÚMERO
				*/
				grid-template-columns: 1fr repeat( 12, auto ) 1fr; 
			}
				nav .catalogo > ul > li > button,
				nav .catalogo > ul > li > a {
					position: relative;
					z-index: 2;
					display: block;
					width: 100%;
					/*padding: 20px 25px 30px 25px; SMALL */
					padding: 20px 25px 25px 25px;
					border: 1px solid #fafafa;
					border-bottom-color: transparent;
					background: none;
					white-space: nowrap;
					font-weight: 600;
					text-transform: uppercase;
					color: #333;
					/*font-size: 18px; SMALL */
					font-size: 15px;
					letter-spacing: 2px;
				}
				body:not(.navxs) nav .catalogo > ul > li:hover > button {
					border-color: #ddd;
					border-bottom-color: #fff;
					background: #fff;
					color: #000;
				}
				body:not(.navxs) nav .catalogo > ul > li > a:hover {
					color: #000;
				}

				nav .catalogo ul.principal {
					position: absolute;
					z-index: 1;
					top: calc( 100% - 1px );
					left: 0;
					right: 0;
					padding: 50px 150px;

					display: grid;
					grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
					/*grid-template-columns: 1fr repeat( 12, auto ) 1fr;*/
					
					grid-gap: 30px;

					opacity: 0;
					pointer-events: none;
					background: #fff;
					border-top: 1px solid #ddd;
					border-bottom: 1px solid #ddd;
					/*transition: opacity 0.3s ease;*/
				}
				body:not(.navxs) nav .catalogo ul.principal {
					max-height: calc( 100vh - 126px );
					overflow-y: auto;
				}
				body:not(.navxs) nav .catalogo > ul > li:hover ul.principal {
					opacity: 1;
					pointer-events: auto;
				}
				body:not(.navxs) nav .catalogo ul.principal .titulo {
					display: none;
				}
			
				nav .catalogo .subtitulo {
					font-weight: 600;
					color: #333;
					text-transform: uppercase;
					letter-spacing: 2px;
					padding-bottom: 10px;
					display: block;
					transition: all .3s ease;
					font-size: 15px; /* SMALL */
				}
				body:not(.navxs) nav .catalogo .subtitulo:hover {
					text-decoration: underline;
					color: #000;
				}
				nav .catalogo ul.secundario {
					border-left: 2px solid #ddd;
					transform: translateY( 8px );
					transition: transform 0.3s ease;
				}
				body:not(.navxs) nav .catalogo > ul > li:hover ul.secundario {
					-webkit-transform: translateY( 0 );
					transform: translateY( 0 );
				}
					nav .catalogo ul.secundario a {
						color: #333;
						padding-left: 15px;
/*
						padding-top: 7px;
    				padding-bottom: 8px;
						font-size: 16px; SMALL
*/
						padding-top: 5px;
    				padding-bottom: 6px;
						font-size: 14px;
						line-height: 18px;
						display: block;
						transition: all .3s ease;
						letter-spacing: 1px;
					}
					nav .catalogo ul.secundario a.all {
						color: #000;
						font-weight: 700;
						padding-top: 20px;
						padding-bottom: 0;
					}
					body:not(.navxs) nav .catalogo ul.secundario a:hover {
						color: #000;
						text-decoration: underline;
						-webkit-transform: translateX( 2px );
						transform: translateX( 2px );
					}

		nav .buscador {
			grid-area: buscador;
		}
			nav .buscador input {
				border: 2px solid #333;
				border-radius: 2px;
				padding: 2px 5px;
			}
		nav .favoritos {
			grid-area: favoritos;
		}
		nav .cesta {
			grid-area: cesta;
		}
			nav .buscador,
			nav .favoritos,
			nav .cesta {
				align-self: center;
			}
			nav .buscador button,
			nav .favoritos a,
			nav .cesta button {
				font-size: 20px;
				color: #333;
				border: 0;
				background: #fff;
				border-radius: 3px;
				display: block;
				width: 50px;
				height: 50px;
				line-height: 36px;
				border: 1px solid #ddd;
				transition: all .3s ease;
			}
			body:not(.navxs) nav .buscador button:hover,
			body:not(.navxs) nav .favoritos a:hover,
			body:not(.navxs) nav .cesta button:hover {
				background: #fafafa;
				border: 1px solid #aaa;
			}

			nav .favoritos span {
				display: none;
			}




	nav .principal.jsponsor {
		display: grid;
		grid-template-columns: repeat( 12, auto );
	}
		nav .principal.jsponsor > li .secundario {
			display: grid;
			grid-template-columns: repeat( auto-fit, minmax( 100px, 200px ) );
			grid-gap: 8px;
			border: 0;
		}
		nav .principal.jsponsor > li .secundario > li {
			border: 1px solid #eee;
			transition: border .3s ease;
			border-radius: 2px;
			background: #fff;
		}
		nav .principal.jsponsor > li .secundario > li:hover {
			border: 1px solid #000;
		}

nav .catalogo .jsponsor ul.secundario a {
	padding: 0;
	text-align: center;
	display: grid;
	grid-template-rows: 1fr auto;
}
body:not(.navxs) nav .catalogo .jsponsor ul.secundario a:hover {
	transform: none;
	text-decoration: none;
}
nav .catalogo .jsponsor ul.secundario img {
	width: auto;
  max-width: 100%;
  height: auto;
	/*max-height: 100%;*/
  max-height: 100px;
  margin: 0 auto;
}
nav .catalogo .jsponsor ul.secundario span {
	display: block;
	padding: 10px;
	font-weight: 600;
}
nav .catalogo .category-image {
	margin-bottom: 15px;
	max-width: 100%;
}

nav .catalogo .jsponsor .all {
	display: grid;
	align-content: center;
	font-weight: 600;
	text-align: center;
}
nav .catalogo .jsponsor ul.secundario .all a {
	display: block;
	padding: 10px;
	text-transform: uppercase;
}
body.navxs nav .catalogo .jsponsor ul.secundario .all a {
	text-align: center;
	text-transform: none;
}



body.navxs nav .catalogo .category-image {
	display: none;
}



	body.navxs .jmenu {
	  position: fixed;
	  top: 0;
	  bottom: 50px;
	  overflow-y: auto;
	  overflow-x: hidden;
		z-index: 100;

		grid-template-areas:
			'nav'
			'header'
		;
		grid-template-rows: auto 1fr;
		opacity: 0;
		pointer-events: none;
		width: 100%;
		left: 100%;
		background: transparent;
	}

	body.ios.navxs .jmenu {
		bottom: 0;
	}



	body.navxs .jmenu.opened {

													/*transition-property: all;
												  transition-duration: .5s;
												  transition-timing-function: cubic-bezier(.4,0,.2,1);*/
		display: grid;
		opacity: 1;
		left: 0;
		background: #fff;
		pointer-events: auto;
	}

	body.navxs .jmenu:not(.opened) {
		pointer-events: none !important;
	}
	body.navxs .jmenu.submenu-opened {
		overflow-y: hidden;
	}


body.navxs nav {
	background: #fff;
	padding: 0;
	border: 0;
/*	transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);*/
  /*transition: none !important;*/
  left: 0;
}
	body.navxs nav > ul {
		grid-template-areas:
			'logo'
			'catalogo'
			'buscador'
			'favoritos'
			'cesta'
		;
		grid-template-columns: 1fr;
		grid-gap: 0;
	}

		body.navxs nav .logo {
			text-align: center;
			border-bottom: 1px solid #eee;
			font-size: 40px;

		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  height: 60px;
		  background: #fff;
		  z-index: 3;
		  pointer-events: none;
		}

		body.navxs nav .catalogo {
			padding-top: 60px;
			border-bottom: 1px solid #eee;
		}
			body.navxs nav .catalogo > ul {
				grid-template-columns: 1fr;
				padding: 15px 0;
			}
				body.navxs nav .catalogo > ul > li > button,
				body.navxs nav .catalogo > ul > li > a {
					position: relative;
					padding: 7px 45px 7px 30px;
					text-align: left;
					border: 0;
					font-size: 17px;
				}
				body.navxs nav .catalogo > ul > li > button::before,
				body.navxs nav .catalogo > ul > li > a::before {
					position: absolute;
					top: 8px;
					right: 25px;
					content: "\e305";
					font-family: 'icons' !important;
				}
				body.navxs nav .principal.opened {
					padding-bottom: 15px;
				}
				body.navxs nav .secundario li a {
					padding-top: 11px;
					padding-bottom: 11px;
					font-size: 20px;
				}
				body.navxs nav .secundario li a:active {
					color: blue;
					background: rgba(0,0,0,0.03);
				}

		body.navxs nav .vacio {
			display: none;
		}



body.navxs nav .buscador,
body.navxs nav .cesta {
	display: none;
}

body.navxs nav .favoritos a {
	width: 100%;
	height: auto;
	border: 0;
	text-align: left;
	color: #333;
	font-size: 17px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 18px 45px 6px 30px;
	position: relative;
	font-weight: 600;
}
body.navxs nav .favoritos a:after {
	position: absolute;
	top: 15px;
	right: 20px;
	content: "\e501";
	font-family: 'icons';
	color: red;
	font-size: 20px;
}
body.navxs nav .favoritos span {
	display: block;
}
body.navxs nav .favoritos i {
	display: none;
}


body.navxs header {
	padding: 0;
	/*transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);*/
  left: 0;
  z-index: 1;
}
body.navxs .jmenu.header-opened header {
  z-index: 999;
}
body.navxs .jmenu.header-opened ul.principal > li {
	padding: 0;
}
body.navxs .jmenu.header-opened ul.principal > li > a {
	font-weight: 600;
	display: block;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

	body.navxs header > ul {
		grid-template-columns: 1fr;
		grid-gap: 0;
	}
		body.navxs header a,
		body.navxs header button {
			display: inline-block;
			padding: 8px 30px;
			color: #333;
			font-size: 17px;
			/*font-weight: 300;*/
			font-weight: 400;
			letter-spacing: 0;
		}

	body.navxs header .perfil {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background: #fff;
		z-index: 1;
		border-top: 1px solid #eee;
	}
		body.navxs header .perfil a {
			font-weight: 600;
			line-height: 50px;
			padding-top: 0;
			padding-bottom: 0;
		}

body.navxs ul.principal {
	display: block;
	position: fixed;
	top: 60px;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: 5;
	padding: 15px 0 0 0;
	border: 0;
	background: #fff;
	overflow-y: auto;
	opacity: 0;
  transition-property: transform,background-color, opacity;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
	transform: translateX( 100px );
	pointer-events: none;
}

body.navxs ul.principal.opened {
	pointer-events: auto;
	opacity: 1;
	transform: translateX( 0 );
	background: #f9f9f9;
	/*transition: none;*/
}
	body.navxs ul.principal > li {
		padding: 15px 30px;
	}
	body.navxs nav .catalogo ul.secundario a {
		font-size: 16px;
	}


body.navxs .jmenu.submenu-opened nav,
body.navxs .jmenu.submenu-opened header {
	left: -40px;
}



body.navxs .jmenu .titleback {
  position: fixed;
  z-index: 7;
  top: 0;
  right: 0;
	
	height: 60px;
  width: 100%;
	overflow: hidden;

	padding-left: 36px;
	padding-right: 60px;

	border: 0;
	border-bottom: 1px solid #eee;

	font-weight: 600;
	text-transform: uppercase;
	text-align: left;
	font-size: 17px;
	line-height: 20px;
	align-items: center;
	background: #fff;

	opacity: 0;

	pointer-events: none;
	
	transition: right .4s ease, opacity .2s ease;
}



body.navxs .jmenu.submenu-opened .titleback {
	display: flex;
	right: 0;
	opacity: 1;
	pointer-events: auto;
}
body.navxs .jmenu.submenu-opened .titleback:before {
 	content: "\e304";
	font-family: 'icons';
	position: absolute;
	top: 20px;
	left: 15px;
	font-size: 16px;
 }
body.navxs .jmenu .closer {
	position: fixed;
	top: 0;
	right: 0;
	font-size: 22px;
	z-index: 10;
	width: 59px;
	height: 59px;
	border: 0;
	background: #fff;
 }




body.navxs nav .catalogo .jsponsor ul.secundario {
	grid-gap: 5px;
	align-content: center;
	grid-template-columns: 1fr;
}
body.navxs nav .catalogo .jsponsor ul.secundario a {
	grid-template-columns: 50px 1fr;
	grid-template-rows: 1fr;
	text-align: left;
	align-items: center;
}
body.navxs nav .catalogo .jsponsor ul.secundario a span {
	padding: 0 15px;
}









@media screen and (max-width: 1600px)
{
	nav .catalogo > ul > li > button,
	nav .catalogo > ul > li > a {
		padding: 20px 15px 30px 15px;
	}
}




.modal-search {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	bottom: 0;
	background: red;
	left: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	justify-content: center;
  align-items: center;
  background: rgba(255,255,255,.98);
  transform: translateY( 100px );
  transition: all .3s ease;
}
.modal-search.opened {
	opacity: 1;
  transform: translateY( 0 );
  pointer-events: auto;
}
	.modal-search input {
		font-size: 50px;
		border: 0;
		background: none;
		border-bottom: 2px solid #eee;
		transition: all .3s ease;
		color: #000;
		text-align: center;
	}
	.modal-search input:focus {
		border-bottom-color: #f50257; 
	}
	.modal-search .action-search-close {
		position: absolute;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    font-size: 25px;
    border: 0;
    background: none;
	}

@media screen and (max-width: 767px) {
	.modal-search input {
		font-size: 30px;
		margin: 5px;
	}
}



.modal-venta-privada {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba( 0,0,0, 0.8 );
	z-index: 99999;
																			/*display: flex;*/
}
.modal-venta-privada.open {
	display: flex;
}


.modal-venta-privada .content {
	background: #fff;
	align-self: center;
	margin: 0 auto;
	max-width: 900px;
	display: grid;
	grid-template-areas: 'form image';
	grid-template-columns: 1fr 1fr;
}



.modal-venta-privada .image {
	max-width: 100%;
	grid-area: image;
	background-image: url( 'https://www.joma-sport.com/ka/apps/joma_com_media/assets/venta_privada/2.jpg' );
  background-size: contain;
  background-position: top right;
  background-repeat: no-repeat;
}
.modal-venta-privada .formulario {
	padding: 30px;
	position: relative;
	grid-area: form;

}

@media screen and (max-width: 767px)
{
	.modal-venta-privada .content {
		grid-template-columns: 1fr;
		grid-template-areas:
			'image'
			'form'
		;
    grid-template-rows: 30% 70%;
    align-self: auto;
		overflow-y: auto;
	}

	.modal-venta-privada .image {
		background-size: cover;
		background-position: top center;
	}

	.modal-venta-privada h1 {
		font-size: 25px;
	}
	.modal-venta-privada .formulario {
		padding: 15px;
	}
	.modal-venta-privada .formulario button {
		float: none !important;
	}
}




.modal-venta-privada .form_private_error {
	color: red;
}
.modal-venta-privada .welcome {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f50057;
	z-index: 2;
	color: #fff;

	font-size: 35px;
  align-items: center;
  text-align: center;
  padding: 30px;

  top: 250px;


  transition: all .3s ease;
	opacity: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.modal-venta-privada .welcome span {
	text-align: center;
}
.modal-venta-privada .welcome.ok {
	opacity: 1;
	top: 0;
  pointer-events: auto;
}
.modal-venta-privada .welcome button {
}

/*
========================================================================================================================
CART UNITS ICON
========================================================================================================================
Número de unidades en el icono de cesta																										                            */
.action-cart-toggle {
	position: relative;
}

.action-cart-toggle > span {
	position: absolute;
	display: none;
	bottom: 11.5px;
  right: 14px;
  width: 20px;
  height: 20px;
	border-radius: 10px;
	color: #333;
	font-size: 10px;
	font-weight: 600;
}
.action-cart-toggle > span.active {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
body.navxs .jmenu .action-cart-toggle > span {	
	display: none;
}

body.navxs .jmenuxs .action-cart-toggle > span {
	position: absolute;
	display: none;
}
body.navxs .jmenuxs .action-cart-toggle > span.active {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	bottom: 17px;
	right: 15px;
}
body:not(.navxs) .jmenuxs .action-cart-toggle > span {	
	display: none;
}
li.favoritos {
	position: relative;
}
#fav-units {
	position: absolute;
	display: none;
	bottom: 16px;
  right: 15px;
  width: 20px;
  height: 20px;
	border-radius: 10px;
	color: #333;
	font-size: 10px;
	font-weight: 600;
}
#fav-units.active {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
body.navxs .jmenu #fav-units {
	display: none;
}