/* defino la fuente */
@font-face{
	 font-family: 'firaopen';    src: url('./res/fonts/fira.otf');
}
/*fin fuente*/

/*cabeceras estilo firefox os*/
section header
{
	position:absolute;
	width:100%;
	height:5rem;									/* altura 5rem 					  */
	background: #111; 	/* un degradado de fondo		  */
	z-index:50;
}

	section header span.tituloTxt{
		position:relative;
		bottom:1.25em;
	}	

@media all and (max-width : 480px) {
	section header span.titulo img{
		position:relative;
		right:1rem;
	}
}
@media all 
and (max-width : 320px) {
	section header span.titulo img{
		position:relative;
		right:0;
	}
}

@media all 
and (min-width : 1000px) {
	section header span.titulo img{
		position:relative;
		right:29rem;
		top:0.25em;
	}
}


section header span.titulo
{		
	position:relative;
	width:80%;
	font-size:1.25rem;
	font-weight:bold;
	line-height:5rem;
	color:#FFF;										/* color blanco */
	text-align:center;								/*alineado al centro*/
	float:left;											
}
section header:first-child .icon	/* el primer elemento hijo de header con la clase icon */
{
  position: relative;										  /* posicion relativa */
  display: inline;											  /* se situa en linea */
  width: 3rem;  											  /* anchura del icono */ 
  height: 4.9rem;											  /* altura del icono  */
  float:left;												  /* se situa a la izquierda */
  background: transparent no-repeat center center / 3rem auto;/* tipo de fondo,posicionamiento xy / tamaño x,y */
  font-size: 0;												  /* para evitar que salga el texto,nos interesa solo el icono */
  overflow: hidden;											  /* sin scrolls */
}

section header:first-child .icon.icon-menu						   /* definiendo el icono menu */
{		
	background-image:url('./res/icons/menu.png');			 /* imagen de fondo */
}

section header:first-child  .icon:active						         /*  al hacer click sobre un icono de header */
{
	opacity:0.75;											 /* transparenta al 75% 					 */
}

section header menu													/* los <menu></menu> que haya se situan a la derecha con una altura de 3rem */
{
	float:right;
	height: 3rem;
	background: transparent no-repeat center center / 3rem auto;/* tipo de fondo,posicionamiento xy/tamaño x,y */
}

section header a menu:active											/* igual que antes al hacer click se vuelve un poco transparente */
{	
	opacity:0.75;
}

section header menu[type=rueda]										/* type es un parametro de menu, si vale "rueda" se pone el icono */
{
	background-image:url('./res/icons/rueda.png');
}
/* fin cabecera */

/* boton tipo firefox os */
button
{		
	width:100%;													/* ocupa todo el ancho  				  */
	height:5rem;												/* 5rem de alto 					  	  */
	text-align: center;											/* texto alineado al centro 			  */
	font-size: 1.5rem;											/* tamaño de fuente						  */
	color: #333;												/* color 								  */
	background: linear-gradient(#fbfbfb, #cbcbcb);			    /* fondo degradado						  */	
	font-family:'firaopen';										/* fuente la cargada al inicio		      */
	border-radius:0.2rem;										/* esquinas redondeadas					  */
	border: 0.1rem solid #babbab;								/* tamaño del borde, tipo de borde, color */
	text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.5);			/* sombra blanca transparente sobre el texto */
}

button[disabled]						/* si posee la propiedad disabled	*/
{
  background: #e7e7e7;				/* color plano 						*/
  border-color: #c7c7c7;		    /* color del borde					*/
  color: #c7c7c7;					/* color de texto					*/
  text-shadow: none;				/* sin sombras						*/
  pointer-events: none;				/* deshabilita los clicks y hover   */
}

button:active
{
	background: linear-gradient(#00c8f0, #00aac8);	/*al pulsar se pone el degradado*/
}
/* fin boton */
*{	user-select: none;}