/*------------------------------------*\
    $CONTENIDO 
    
    (Ver SMACSS para aclarar 
     categorización de reglas:
     https://smacss.com/book/categorizing )
    (formateo de reglas:
        Box (display, float, position, left, top, height, width)
        Border
        Background
        Text
        Other
     tal como dice en:
     https://smacss.com/book/formatting
    )
    
    Para buscar un grupo de reglas, p.e: $<SECCION>
    Para buscar una definición de una clase, p.e: $md-<rule>
\*------------------------------------*/

/* TODO: Dejar tabla de contenidos con lo que tengas */
/**
 * Contenido..................... Esto que lees
 * Base
 *   Reset......................... Reinicio de valores CSS
 *   Fuentes....................... Fuentes de texto que vamos a importar
 *   Elementos..................... Elementos html varios como body, img, HR, etc...
 * Layout o Componentes mayores.... Reglas de maquetación y componentes mayores (header, nav, footer...)
 * Modulos ó Componentes menores....Componentes ó módulos (según clasificación SMACSS)
 * Estado.......................... Reglas según estados que cambian de componentes
 * Helpers......................... Utilidades para todos los componentes
 */
 
 
/*------------------------------------*\
    $RESET
\*------------------------------------*/

/* Intencionalmente en blanco, lo da purecss (normalize) */
  
/*------------------------------------*\
    $FUENTES
\*------------------------------------*/
/**
  * optimización: Optimizar fuentes web
  *
  * Tomadas de https://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium
  * RobotDraft es la fuente usada porque renderiza mejor que Roboto
  * (sólo nos hemos traido la versión latin (qué es la que nos hace falta para nuestra localización)
  * Se hace esto para optimizar la carga de fuentes tal como se indica en:
  *  https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=es
  */

/* latin */

@font-face {
    font-family: 'RobotoDraft';
    font-style: normal;
    font-weight: 400;
    src: local('RobotoDraft'), local('RobotoDraft-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v3/0xES5Sl_v6oyT7dAKuoni-L2WfuF7Qc3ANwCvwl0TnA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */

@font-face {
    font-family: 'RobotoDraft';
    font-style: normal;
    font-weight: 500;
    src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v3/u0_CMoUf3y3-4Ss4ci-VwVZ9_gRnCZKV8woZ8AMwFSQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */

@font-face {
    font-family: 'RobotoDraft';
    font-style: normal;
    font-weight: 700;
    src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v3/u0_CMoUf3y3-4Ss4ci-VwdGR1r2frwpfjEqI8Bb_XHU.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* latin */

@font-face {
    font-family: 'RobotoDraft';
    font-style: italic;
    font-weight: 400;
    src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v3/er-TIW55l9KWsTS1x9bTflGX6R4v-P3fCrxUne8Jf1A.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/*------------------------------------*\
    $ELEMENTOS
\*------------------------------------*/

/* this help to calculate dimensions of box's */

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* to avoid highligh in clicked element */
}

/**
  * Para que PureCSS use las fuentes incrustadas anteriores correctamente
  * tal como recomienda PureCSS: http://purecss.io/grids/#using-grids-with-custom-fonts
  *
  * When setting the primary font stack, apply it to the Pure grid units along
  * with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
  * specific font stacks to ensure the greatest OS/browser compatibility.
*/

/* TODO: Ver si es más eficiente aplicar fuente a body o los elementos directamente*/

html,
button,
input,
select,
textarea,
p, 
h1,
h2,
h3,
h4 {
    font-family: 'RobotoDraft', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a{
	text-decoration: none;
	color: inherit;
}
span {
	display:inline-block;
	vertical-align:middle;
}


/* to avoid border in focused element */
:focus {
	outline: none;
}

::-moz-focus-inner {
	padding: 0;
	border: none;
}


.md-detail__text img{
	max-width: 100%;
}

.md-detail__text table{
	max-width: 100%;
}

.md-detail__header__title {
    font-weight: bold;
    font-size: 1.3em;
}

/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/

/* TODO: Tratar completamente los dpi's, se ha supuesto 1px=1dp */


     
/*----------------------------------------------------------------------------- 
 $md-layout: Page Layout container.
                It configures variations of page layouts like:
                - md-layout--toolbar-extended (you can use this with others 
                  layout classes)
                - md-layout--sidenav-right
                - md-layout--sidenav-left (you must use 
                  only one md-layout--sidenav)
                
                Each layout is defined with the components (rules) wich affects 
 ----------------------------------------------------------------------------*/
   
.md-layout {
    position: absolute; /* in order to make footer position relative to this */
    top: 0;
    left: 0;
    height: 100%; /* in order to let the height of the content div growth if the content is small */
    width: 100%;
}

/*----------------------------------------------------------------------------- 
 $md-sidenav: The side navigation menu of the page
 			  (It depends on the page layout)
 ----------------------------------------------------------------------------*/

/* first, we code the desktop rules because IE8 doesn't support media queries */
.md-sidenav {
    position: fixed;
    top: 0;
    bottom: 0;
    margin-top: 4em; /*64px height of normal toolbar*/
    width: 16em; /*256px*/
    z-index: 100;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */
	-webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

    /* variations depending on layout */
    .md-layout--toolbar-extended .md-sidenav {
        margin-top: 8em; /* toolbar extended hight */    
    }
    
    .md-layout--sidenav-right .md-sidenav {
        left: auto; 
        right: 0;
    }
    
    .md-layout--sidenav-left .md-sidenav {
        left: 0;
        right: auto; 
    }

    /* mobile: sidenav always is fixed on the left */
    @media screen and (max-width: 63.5em) {
        
        /* For specifity we can't define the rule with only .md-sidenav 
           (which would be the correct) 
           For any layout in mobile in fixed on the left and is closed when is loaded */
        .md-layout .md-sidenav {
            left: 0;
            right: auto;
            margin-top: 0;
            margin-left: -16em; /*-256px*/ /*closed*/
            z-index: 1100; /* Over the modal layer */
        }
        
        .md-layout .md-sidenav.md-sidenav--is-open {
            margin-left: 0;         
        }
    }

/*----------------------------------------------------------------------------- 
 $md-sidenav__header: The header of the side menu (usually only shown in mobile)
 ----------------------------------------------------------------------------*/
.md-sidenav__header {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 8em;
	content: " ";
}

.md-sidenav__header__content {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*height: inherit;*/
    height: 8em; /* because android browser doesn't render inherit value */
    width: 100%;
    padding-left: 1em;
    padding-bottom: 1em;
	background-color: inherit;
    color: inherit;
}

/*----------------------------------------------------------------------------- 
 $md-toolbar: The toolbar or application bar of the site or app
 			  (It can be normal or extended)
 ----------------------------------------------------------------------------*/

.md-toolbar { 
    position: fixed;
    top: 0;
    left: 0;
    height: 4em; /*64px*/
    width: 100%;
    z-index: 200;
	-webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
}

    .md-layout--toolbar-extended .md-toolbar {
        height: 8em;
    }

/*----------------------------------------------------------------------------- 
 $md-toolbar__over-content: This the part of the toolbar placed over the content
   							It depends of the page layout
 ----------------------------------------------------------------------------*/

/* shadow and colors of the of the toolbar over content */ 
.md-toolbar__over-content {
    z-index: 250; /* to be over of the background image */
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19); /* shadow-2 */
    background-color: inherit;
    color: inherit;
}

    .md-layout--sidenav-right .md-toolbar__over-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 16em; /*256px*/ /* the width of the right menu */
    }
    
    .md-layout--sidenav-left .md-toolbar__over-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 16em; /*256px*/ /* the width of the right menu */
        right: 0;
    }

    @media screen and (max-width: 63.5em) {
              
        /* in mobile, position of this element is always the same */
        .md-toolbar__over-content {
            right: 0;
            left: 0;
            width: inherit; /* in mobile the toolbar expand to catch all the width */
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                        0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */
        }
    }

/*----------------------------------------------------------------------------- 
 $md-toolbar__over-sidenav: This the part of the toolbar placed over the 
 							sidenav menu. 
 							It depends of the page layout
 ----------------------------------------------------------------------------*/

/* shadow and colors of the of the toolbar over menu */
.md-toolbar__over-sidenav {
    z-index: 250; /* to be over of the background image */
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */
    background-color: inherit;
    color: inherit;
}

    .md-layout--sidenav-right .md-toolbar__over-sidenav {
        position: absolute;
        top:0;
        bottom: 0;
        right: 0;
        width: 16em; /*256px*/ /* the width of the right menu */
        margin-top: 0;
    }
    
    .md-layout--sidenav-left .md-toolbar__over-sidenav {
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        width: 16em; /*256px*/ /* the width of the right menu */
    }

    @media screen and (max-width: 63.5em) {
        
        /* in mobile, in any page layout position of this element is always the same */
        .md-layout .md-toolbar__over-sidenav {
        	right: 0;
            left: auto;
            width: auto; /* there isn't menu so this width is not the width of the menu */
            box-shadow: none; /* in mobile, shadow is only 1 and in all the toolbar */
            background-color: transparent; /* BgColor is transparent because floats in the right
            								  and it mustn't overwrite toolbar color */
            								  
        }
        
        .md-layout--toolbar-extended .md-toolbar__over-sidenav {
	      margin: 0.75rem; 
	      padding-top: 0em;
	 }
	 
	 .md-layout--toolbar-extended .md-toolbar__over-sidenav .md-toolbar__search {
		padding-top: 0em !important; 
	 }
	 
        .md-icon_toolbar {
            display: none;
            margin-top: .1em;
        }

        .md-icon--iconSearchList{
            margin-right: 0.1em !important;
	    margin-top: 0.2em !important;
	    height: 35px !important;
        }
        
        .md-icon-bg--iconSearchList{
	    background: rgba(0,0,0,.5) !important;
        }

        .md-searchList{
           border-radius: 0px !important;
           margin-top: 5px !important;
        }
        
        
        .md-layout--sidenav-right .md-toolbar__over-sidenav {
		margin: 0.5em;
	}

    }


/*----------------------------------------------------------------------------- 
 $md-toolbar__text: This the part of the toolbar where the text is placed
 ----------------------------------------------------------------------------*/
.md-toolbar__text { 
    position: absolute;
    bottom:0.5em; /* this align text with icons in short toolbar
    				  and place correctly in extended toolbar */
    left: 4.5em; /* 75px as seen in material desing specs */
    right: auto;
    text-align: left;
}

.md-layout--toolbar-extended .md-toolbar__text{
	margin-top: 1em;
}


.md-toolbar__text > * {
	display: inline; 
}


@media screen and (max-width: 63.5em) {
	.md-toolbar__text { 
		bottom:1.4em; 
		/*left:0 !important; ssg:quitado para que no se sobreponga sobre el icono de menú*/ 
		width:100%;
		/*text-align:center;*//* this align text with icons in short toolbar
	    				  and place correctly in extended toolbar */
	}
}
/*----------------------------------------------------------------------------- 
 $md-toolbar__actions: This the part of the toolbar where the action icons are 
   				       placed. They're aligned to the right
 ----------------------------------------------------------------------------*/
.md-toolbar__actions { 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

    @media screen and (max-width: 63.5em) {
        .md-toolbar__actions {
            right: 56px;
            right: 3.5rem;
        }    
    }

/*----------------------------------------------------------------------------- 
 $md-content: This the part of the page where the content is placed
 
 ----------------------------------------------------------------------------*/

.md-content {    
    min-height: 95%; /* this must be set to result of (page heigh - footer height) */
    	             /* to avoid this: if content is lower than page height the 
    	                footer appears in the middle of the page */
   	padding-top: 6em; /* toolbar height */
   	                  /* If you change this padding also change it in 
   	                     md-content--js-retains-extended-padding-top */ 
   	padding-bottom: 2em; /* to avoid strange white padding's overflow outside
   							  of the elements inside the content div*/
   	padding-left: 3em;
   	/*padding-right: 3em;*/
    background-color: #ececec; /* app background color */
    
}

      	
	@media screen and (max-width: 63.5em) { 	
		.md-content {    	
		   	padding-left: 0;
		   	padding-right: 0; 
		}
	}
   	
    .md-layout--toolbar-extended .md-content {
        padding-top: 10em; /* toolbar extended hight plus space*/    
    }
    
    .md-layout--sidenav-right .md-content {
        margin-right: 16em; /* the width of the right menu */
    }
    
    .md-layout--sidenav-left .md-content {
        margin-left: 16em; /* the width of the right menu */
    }
    
    .md-layout .md-content.md-content--js-retains-extended-padding-top {
        padding-top: 10em; /* toolbar extended hight */
    }

@media screen and (max-width: 63.5em) { 	
	 .md-layout--sidenav-right .md-content {
        margin-right: 16em; /* the width of the right menu */
    }
    
    .md-layout--sidenav-left .md-content {
        margin-left: 16em; /* the width of the right menu */
    }
	
}


    @media screen and (max-width: 63.5em) {
        /* mobile: sidenav always is fixed to the left, so padding-right or left isn't neccesary */
        /* with any layout */
        .md-layout .md-content {
            margin-right: 0;
            margin-left: 0;
            padding-left: 0;
           	padding-right: 0;
           	background-color: white; /* When mobile, background color is always white */
        }
        
        /* In mobile, content follow the header, so padding-top is lower than desktop */
        .md-layout--toolbar-extended .md-content {
        	padding-top: 8em; /* toolbar extended hight plus space*/    
    	}
    	
         /* In mobile, content follow the header, so padding-top is lower than desktop */
    	.md-layout  .md-content.md-content--js-retains-extended-padding-top {
    		padding-top: 7em; /* toolbar extended hight plus space*/
    	}
  
    }
    

    
    
.md-whiteframe-container {
    background-color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */   
}	
.md-whiteframe-container__extra{
	color:#424242;
	font-size:13px;	
}

	.md-detail__header{
		padding:1em 2em;			
    	border-bottom: 1px solid #E5E5E5;						
	}
		.md-detail__header__title{
			font-weight: 500;
			font-weight: bold;						
		}
	.md-detail__subheader{	
		padding:1em 2em;	
		vertical-align:middle;											    							
	}						
		.md-detail__categories{
			padding-top:0;
			vertical-align:middle;
		}
		.md-detail__subheader__categories__item{			
			background-color:#E0E0E0;
			color:#424242;
			font-size:13px;
			cursor: default;
			border-radius: 16px;
			-moz-border-radius: 16px; 
			-webkit-border-radius: 16px;
			display: inline-block;
			margin: 8px 8px 0 0;
  			padding: 0 12px;
  			height: 32px;
  			line-height: 32px;	
  			text-align:center;																							 						
		}
					
	.md-detail__images{	
		padding:0em 0em 1em 0em;
	}
	.md-detail__images-item{
		/*width: 100%;*/
		height: auto;
		display: block;
		/*se añade para centrar*/
		max-width: 100%;
		align-content: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
	}		
	.md-detail__text{
		padding:0em 2em;
		text-align:justify;				    							
	}
	
	.md-detail__text a{
		/*color:#2196F3;*/
		color:#673AB7;
	}
	
	.md-detail__attaches{
		border-top: 1px solid #E5E5E5;		
	}	
	.md-detail__attaches__item{								
		display: block;
		list-style-type: none;
		padding:0em 1em 1em 0em;									 						
	}
	
	.md-detail-icon{
		display: inline-block;
		margin: 0px;				  
		padding: 0 0.5em 0 0;
		font-family: 'material-design-icons';
		speak: none;
		color: inherit;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;		
		font-size: 1.2rem;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: rgba(0, 0, 0, .54);
		color:#757575;
	}
/*----------------------------------------------------------------------------- 
 $md-activities: The list of activities below the principal content
 ----------------------------------------------------------------------------*/
.md-activity{
	vertical-align:middle;
	text-align:center;
}
.md-activity__item{								
	cursor: default;			
	display: inline-block;			
	padding: 12px;
	text-align: center;
	font-size: 17px;																							 						
}

.md-activity__item a{
	/*color: #8BC34A;*/
	color: #009688;
	
}

.md-icon-activity {
	display: inline-block;
	margin: 7px;  /* ie8 hack because ie doesn't support rem units*/
	margin: 0.438rem;
	padding: 4px; /* ie8 hack because ie doesn't support rem units*/
	padding: 0.25rem; /* 16px, same as google inbox */
	font-family: 'material-design-icons';
	speak: none;
	color: inherit;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 48px; /* ie8 hack beacuse ie doesn't support rem units*/
	font-size: 3rem; /* 21px, same as google inbox */
	text-transform: none;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.md-menudown__item{								
	cursor: default;			
	display: inline-block;	
	/*max-width: 100%;*/	
	/*padding: 12px;*/
	/*text-align: center;*/
	font-size: 17px;			
																	 						
}

.md-menudown__item a{
	/*color: #8BC34A;*/
	color: #009688;
	max-width:25%;
}

.md-icon-menudown {
	display: inline-block;
	margin: 7px;  /* ie8 hack because ie doesn't support rem units*/
	margin: 0.438rem;
	/*padding: 4px;*/ /* ie8 hack because ie doesn't support rem units*/
	/*padding: 0.25rem;*/ /* 16px, same as google inbox */
	font-family: 'material-design-icons';
	speak: none;
	color: inherit;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 48px; /* ie8 hack beacuse ie doesn't support rem units*/
	font-size: 3rem; /* 21px, same as google inbox */
	text-transform: none;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*----------------------------------------------------------------------------- 
 $md-footer: The footer
 ----------------------------------------------------------------------------*/

.md-bg-grey-800{
	background-color: #424242;
}
.md-footer{
	vertical-align: middle;
	text-align: center;
	padding-top: 1em;	
	margin-right: 16em;
}

	@media screen and (max-width: 63.5em) {
		.md-footer {
			margin-right: 0em;
		} 		     
	}
		    
	.md-footer--links{				    		
    		text-align: center;			
	}
	
	.md-footer--links__item{
		display:inline-block;	
		border-left: #FFFFFF 1px solid;
		padding:0 1em;
	}
	
	.md-footer--links__first-item{				    			 		
		display:inline-block;	
	    	border: 0px;   		    	
	}
	
	@media screen and (max-width: 40em) {
		.md-footer--links__item{
			border: 0px;
			display:block;
		} 		     
	}
	
	.md-footer--logo{
		clear:both;
		text-align:center;
		/*padding:2em;*/
	}
	
		.md-footer--logo span{
			text-align:justify;	
		}
		
		@media screen and (max-width: 40em) {
			.md-footer--logo span{
				text-align:center;
		} 		     
	}

	
	.md-icon-footer-logo{
			display: inline-block;
			padding:0.1em;
			font-family: 'material-design-icons';
			speak: none;
			color: inherit;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			font-size: 64px;
			font-size: 4rem;
			text-transform: none;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
	}
		
	.md-footer--text{
		padding-top: 1em;
		clear: both;
		font-size: 13px;
		color: #BDBDBD;
	}

/*------------------------------------*\
    $COMPONENTES
\*------------------------------------*/

/*----------------------------------------------------------------------------- 
 $md-avatar-img: Avatar rounded img  
 ----------------------------------------------------------------------------*/
.md-avatar-img {
	border-radius: 100%;
	height: 40px;
	width: 40px;
}

/*----------------------------------------------------------------------------- 
 $md-icon: Icons (not icon-button)
 		   Generated from iconmoon because is the only way to work in IE8.
 ----------------------------------------------------------------------------*/

/* Neccesary and generated from icomoon) */
@font-face {
	font-family: 'material-design-icons';
	src:url('http://www.juntadeandalucia.es/avra/export/sites/WebEPSA/parque-torunos/recursos-comunes/fonts/material-design-icons.eot?-p051u4');
	src:url('http://www.juntadeandalucia.es/avra/export/sites/WebEPSA/parque-torunos/recursos-comunes/fonts/material-design-icons.eot?#iefix-p051u4') format('embedded-opentype'),
		url('http://www.juntadeandalucia.es/avra/export/sites/WebEPSA/parque-torunos/recursos-comunes/fonts/material-design-icons.woff?-p051u4') format('woff'),
		url('http://www.juntadeandalucia.es/avra/export/sites/WebEPSA/parque-torunos/recursos-comunes/fonts/material-design-icons.ttf?-p051u4') format('truetype'),
		url('http://www.juntadeandalucia.es/avra/export/sites/WebEPSA/parque-torunos/recursos-comunes/fonts/material-design-icons.svg?-p051u4#material-design-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

.md-icon {
	display: inline-block;
	margin: 12px;  /* ie8 hack because ie doesn't support rem units*/
	margin: 0.75rem;
	padding: 4px; /* ie8 hack because ie doesn't support rem units*/
	padding: 0.25rem; /* 16px, same as google inbox */
	font-family: 'material-design-icons';
	speak: none;
	color: inherit;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 24px; /* ie8 hack beacuse ie doesn't support rem units*/
	font-size: 1.5rem; /* 21px, same as google inbox */
	text-transform: none;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.md-icon_title {
	display: inline-block;
	margin: 12px;  /* ie8 hack because ie doesn't support rem units*/
	margin: 0.75rem;
	padding: 4px; /* ie8 hack because ie doesn't support rem units*/
	padding: 0.25rem; /* 16px, same as google inbox */
	font-family: 'material-design-icons';
	speak: none;
	color: inherit;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 16px; /* ie8 hack beacuse ie doesn't support rem units*/
	font-size: 1.7rem; /* 21px, same as google inbox */
	text-transform: none;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.md-icon_toolbar {
	display: inline-block;
	margin: 12px;  /* ie8 hack because ie doesn't support rem units*/
	margin: 0.75rem;
	padding: 4px; /* ie8 hack because ie doesn't support rem units*/
	padding: 0.25rem; /* 16px, same as google inbox */
	margin-top: .5em;
	font-family: 'material-design-icons';
	speak: none;
	color: inherit;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font-size: 24px; /* ie8 hack beacuse ie doesn't support rem units*/
	font-size: 1.5rem; /* 21px, same as google inbox */
	text-transform: none;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.md-icon_toolbar_menu{
	margin-top:0.5em;
}

@media screen and (max-width: 63.5em) {
	.md-icon_title {
		display: none;			
	} 	
}

.md-icon--social-facebook:before {
  content: "\e918";
}
.md-icon--social-twitter:before {
  content: "\e919";
}
.md-icon--vela:before {
    content: "\e917";
}
.md-icon--ninos:before {
    content: "\e916";
}
.md-icon--pencil:before {
    content: "\e915";
}
.md-icon--mobile:before {
    content: "\e914";
}
.md-icon--video-camera:before {
    content: "\e912";
}
.md-icon--steam:before {
    content: "\e913";
}
.md-icon--checkmark:before {
    content: "\e910";
}
.md-icon--review4:before {
    content: "\e911";
}
.md-icon--info_outline:before {
    content: "\e2a3";
}
.md-icon--bird51:before {
    content: "\e900";
}
.md-icon--camera59:before {
    content: "\e901";
}
.md-icon--canoe1:before {
    content: "\e902";
}
.md-icon--columns9:before {
    content: "\e903";
}
.md-icon--cyclist1:before {
    content: "\e904";
}
.md-icon--dog2:before {
    content: "\e905";
}
.md-icon--download166:before {
    content: "\e906";
}
.md-icon--earth213:before {
    content: "\e907";
}
.md-icon--history6:before {
    content: "\e908";
}
.md-icon--leaves15:before {
    content: "\e909";
}
.md-icon--opened4:before {
    content: "\e90a";
}
.md-icon--park13:before {
    content: "\e90b";
}
.md-icon--ship18:before {
    content: "\e90c";
}
.md-icon--tool680:before {
    content: "\e90d";
}
.md-icon--trains3:before {
    content: "\e90e";
}
.md-icon--walk12:before {
    content: "\e90f";
}
.md-icon--pajarico:before {
	content: "\e801";
}
.md-icon--rotate_left:before {
	content: "\e1aa";
}
.md-icon--dog:before {
	content: "\e800";
}
.md-icon--iconojuntaSintxt:before {
	content: "\e601";
}
.md-icon--iconojuntaContxt:before {
	content: "\e600";
}
.md-icon--warning:before {
	content: "\e002";
}
.md-icon--library_books:before {
	content: "\e014";
}
.md-icon--pause:before {
	content: "\e018";
}
.md-icon--email:before {
	content: "\e04c";
}
.md-icon--phone:before {
	content: "\e057";
}
.md-icon--filter_list:before {
	content: "\e076";
}
.md-icon--border_clear:before {
	content: "\e0c4";
}
.md-icon--cloud_queue:before {
	content: "\e0fd";
}
.md-icon--file_download:before {
	content: "\e0ff";
}
.md-icon--compare:before {
	content: "\e14e";
}
.md-icon--edit:before {
	content: "\e15e";
}
.md-icon--filter_vintage:before {
	content: "\e177";
}
.md-icon--looks:before {
	content: "\e18e";
}
.md-icon--nature_people:before {
	content: "\e199";
}
.md-icon--navigate_before:before {
	content: "\e19a";
}
.md-icon--navigate_next:before {
	content: "\e19b";
}
.md-icon--panorama:before {
	content: "\e19d";
}
.md-icon--photo_camera:before {
	content: "\e1a4";
}
.md-icon--photo_size_select_small:before {
	content: "\e1c4";
}
.md-icon--directions_bike:before {
	content: "\e1c9";
}
.md-icon--directions_railway:before {
	content: "\e1ce";
}
.md-icon--local_florist:before {
	content: "\e1dd";
}
.md-icon--local_library:before {
	content: "\e1e3";
}
.md-icon--local_parking:before {
	content: "\e1e7";
}
.md-icon--map:before {
	content: "\e1f3";
}
.md-icon--place:before {
	content: "\e1f7";
}
.md-icon--restaurant_menu:before {
	content: "\e1f9";
}
.md-icon--traffic:before {
	content: "\e1fd";
}
.md-icon--arrow_back:before {
	content: "\e200";
}
.md-icon--arrow_forward:before {
	content: "\e204";
}
.md-icon--close:before {
	content: "\e209";
}
.md-icon--expand_less:before {
	content: "\e20a";
}
.md-icon--expand_more:before {
	content: "\e20b";
}
.md-icon--menu:before {
	content: "\e20e";
}
.md-icon--more_vert:before {
	content: "\e210";
}
.md-icon--cake:before {
	content: "\e243";
}
.md-icon--group:before {
	content: "\e245";
}
.md-icon--people:before {
	content: "\e251";
}
.md-icon--account_balance:before {
	content: "\e265";
}
.md-icon--delete:before {
	content: "\e287";
}
.md-icon--description:before {
	content: "\e288";
}
.md-icon--exit_to_app:before {
	content: "\e28d";
}
.md-icon--home:before {
	content: "\e29e";
}
.md-icon--language:before {
	content: "\e2a8";
}
.md-icon--schedule:before {
	content: "\e2c9";
}
.md-icon--search:before {
	content: "\e2ca";
}

/*----------------------------------------------------------------------------- 
 $md-icon-button: Icon Buttons
 		   		  The icon button have inside a icon. 
 		   		  Something like this:
 		   		  <a class="md-icon-button  md-is-hidden-on-desktop" href="#">
 		   		  	<i class="md-icon  md-icon--menu"></i>
 		   		  </a>
 ----------------------------------------------------------------------------*/
.md-icon-button {
	display: inline-block;
	background-color: transparent;
    text-decoration: none;
    color: inherit;
    border-radius: 100%;
}

.md-icon-button__disabled {
	color:#E0E0E0;
}


	/* To make the effect of click  */
    .md-icon-button:active .md-icon {
        color: rgba(0, 0, 0, 0.2);
    }

/*----------------------------------------------------------------------------- 
 $md-data-table: The list / data table component
 			  (It depends on the page layout)
 ----------------------------------------------------------------------------*/
.md-list {
	width: 100%;
	max-width: 100%;
	margin-bottom: 2rem;
	background-color: #ffffff;
}

	
	.md-list__header {
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 8px;
		padding-left: 0;
	}
	
	.md-list__header__title {
		display: inline-block;
		padding-top: 16px;
		padding-right: 8px;
		padding-bottom: 16px;
		padding-left: 16px;
		margin: 0;
		vertical-align: middle; /* to align to subtitle */
		font-size: 20px;
		font-weight: normal;
		color: #424242; /* gray 800 (like content)*/
	}
	
	.md-list__header__subtitle {
		display: inline-block;
		padding-top: 16px;
		padding-right: 0;
		padding-bottom: 16px;
		padding-left: 0;
		font-size: 20px;
		color: #9E9E9E; /* gray 500  (like filter)*/
	}
	
	.md-list__header__actions {
		float: right;
		color: #9E9E9E; /* gray 500 */
	}

	.md-list__content {
		width: 100%;
		max-width: 100%;
		font-size: 13px;
		font-size: 0.82rem;
		border-collapse: collapse;
		border-spacing: 0;
	}
	
		.md-list__content__items-header {
			font-weight: bold;
			color: #9E9E9E; /* gray 500 */
		}
		
		.md-list__content__item {
			font-weight: lighter;
			color: #424242; /* gray 800 */
		}
		
		.md-list__content__items-header, 
		.md-list__content__item {
			padding: 0;
		 	border-bottom: 1px solid #e0e0e0;	
		}
		
		.md-list__content__items-header > *,
		.md-list__content__item > * {
		  padding: 1rem;
		  text-align: left;
		  vertical-align: top;
		}
		
		.md-list__content__item {
		 	-webkit-transition: all 0.4s ease;
            	    transition: all 0.4s ease;
		}
		
		.md-list__content__item:hover {
	 		background-color: #EEEEEE; /* Grey 200*/
		}
		
			.md-list__content__item__more-distinguishing-content img {
				width: 40px;
			}
				
			.md-list__content__item__more-actions {
				padding: 0;
				text-align: right;
			}
	
		.md-list__footer {
			font-size: 12px;
			color: #9e9e9e; /* gray 500 */
			text-align: right;
		}
	
/*----------------------------------------------------------------------------- 
 $md-list--layout-list: List like layout for md-list (default is like a table)
 ----------------------------------------------------------------------------*/	
	
	/* we set the table position to relative in order to allow correct positioning of the children elements*/ 
	.md-list--layout-list  md-list__content {
		display: block;
		position: relative;
		top: 0;
		left: 0;
	}
	
	/* table header (content items header) is not shown */
	.md-list--layout-list  .md-list__content__items-header {
		display: none;
	}
	
	.md-list--layout-list  .md-list__content__items-header {
		display: none;
	}
		
	.md-list--layout-list  .md-list__content__item {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		min-height: 72px;
	}
	
	.md-list--layout-list  .md-list__content__item__left-content {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 72px;
	}
	
	.md-list--layout-list  .md-list__item__text--line1 {
		display: inline-block;
		position: relative;
		top: 4px;
		left: 0px;
		bottom: 0;
		padding-left: 0;
		padding-bottom: 0;
		margin-bottom: 0;
		margin-left: 72px;
		max-width: 80%;
		overflow: none;
	}
	
	.md-list--layout-list  .md-list__item__text--line2 {
		display: inline-block;
		position: relative;
		top: 4px;
		left: 0;
		padding-left: 0;
		padding-top: 0;
		margin-top: 0;
		margin-left: 72px;
		max-width: 75%;/*max-width: 85%;*/
		width:85%;
		overflow: none;
		text-align: justify;
		color: #9E9E9E; /* gray 500 */		
	}
	
	.md-list--layout-list  .md-list__content__item__right-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		color: #9E9E9E; /* gray 500 */
	}

 	/* mobile: always shown as a list */
	@media screen and (max-width: 63.5em) {
	
		/* header is hidden and show in title */
		.md-list__header {
			display: none;
		}
		
		/* In mobile, content follow the header, so padding-top is lower than desktop */
		.md-list--layout-list  .md-list__item__text--line1 {
			max-width: 55%;
			text-align: justify;
		}	
	}
	
/*----------------------------------------------------------------------------- 
 $md-js-modal-bg: Modal Background. This div is placed over all the elements except 
   			   those with a z-index > 1000
   			   It's managed from javascript
 ----------------------------------------------------------------------------*/
.md-js-modal-bg {
    position: fixed;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.75);
    -webkit-transition: all 0.4s ease;
        	transition: all 0.4s ease;
}

    .md-js-modal-bg--is-hidden {
        display: none !important;    
    }

/*----------------------------------------------------------------------------- 
 $md-grid-list: Gallery of images
 ----------------------------------------------------------------------------*/
	.md-grid-list {
		width: 100%;
		max-width: 100%;
		margin-bottom: 2rem;
		background-color: #ffffff;
	}
	
	.md-grid-list__header {		
		padding: 1em 2em;
 		border-bottom: 1px solid #E5E5E5;
	}	
	
	.md-grid-list__header__title {
		font-weight: 500;
	}
	
	.md-grid-list__header__actions {
		float: right;
		color: #9E9E9E; /* gray 500 */
	}	
		
	.md-grid-list__content {
		width: 100%;
		max-width: 100%;		
		border-collapse: collapse;
		border-spacing: 0;
		text-align:center;
		padding: 1em 0;
		padding-right: 1em;
	}
	
	.md-grid-list__content__item  {
		position: relative;
		display: inline-block;
		margin:1em;
	}
	
	.md-grid-list__content__item  > a > img {				
		width: auto;
		height: 200px;	
		margin-bottom:-3px;
	}
	
	.md-grid-list__content__item  > a > span{					
		position: absolute;		
		bottom: 0;		
		width: 100%;		
		color: white;
		background: rgba(0, 0, 0, 0.3);		
		padding: 1em;				
	}	
	
		.md-grid-list__content__item_title{			
			background-color:rgba(0, 0, 0, 0.5);
			color:white;
			text-align:justify;								
		}
	
/*------------------------------------*\
    $ESTADO
\*------------------------------------*/

/*-----------------------------------------------------------------------------
 $md-is-hidden 
 $md-is-hidden-on-mobile,
 $md-is-hidden-on-desktop: To hide elements depending on resolution
 ----------------------------------------------------------------------------*/

.md-is-hidden {
    display: none !important;    
}

@media screen and (max-width: 63.5em) {
    
    .md-is-hidden-on-mobile {
         display: none !important;
    }
}

@media screen and (min-width: 64em) {
    /* This rule is complemented in old-ie css sheet 
    	because IE8 doesn't support media queries */
    .md-is-hidden-on-desktop {
         display: none !important;
    }
}

/*----------------------------------------------------------------------------- 
 $md-is-not-visible: Use when you wish make a element invisible, 
 					but not dissappear (the space doesn't desapear) 
 ----------------------------------------------------------------------------*/		
.md-is-not-visible {
	visibility: hidden;
}	

/*-----------------------------------------------------------------------------
 $md-site-title 
 $md-page-title:
 ----------------------------------------------------------------------------*/
.md-site-title {
	font-weight: bold;
	font-size: 1.25em;
}

.md-site-subtitle {
	font-weight: normal;
	font-size: 1.25em;
}
.md-site-subtitle-separator {
	font-weight: normal;
	font-size: 1.25em;
}
/*------------------------------------*\
    $HELPERS
\*------------------------------------*/

/*----------------------------------------------------------------------------- 
 $md-allow-align-vertical: To align elements inside a container
 						   Use:
 ----------------------------------------------------------------------------*/

.md-container-align-vertical {
	display: table;
	width: inherit;
	height: inherit;
}

.md-container-align-vertical__top {
	display: table-cell;
	vertical-align: top;
}

.md-container-align-vertical__bottom {
	display: table-cell;
	vertical-align: bottom;
}

.md-container-align-vertical__center {
	display: table-cell;
	vertical-align: middle;
}

.md-container-align-right {
	text-align: right;
}

.md-container-align-left {
	text-align: left;
}

/*----------------------------------------------------------------------------- 
 $md-bg-<colors>: Background Colors
 ----------------------------------------------------------------------------*/
.md-bg-light-green-400 {
	background-color: #26A69A; /*Teal-400*/
}

.md-bg-light-green-400--transparent {
	/*background-color: rgba(156, 204, 101, 0.60); green*/
	 background-color: rgba(38, 166, 154, 0.60);/*Teal-400*/
}

.md-bg-white {
	background-color: #fff;
}

/*----------------------------------------------------------------------------- 
 $md-bg-img: Background image of any layer (div)
             You must complete this rule in your own site css the 
             background image such as (i.e.):
               	.md-layout--toolbar-extended .md-bg-img {
                	background: url('http://www.juntadeandalucia.es/avra/export/sites/WebEPSA/parque-torunos/recursos-comunes/img/bg-header-img.jpg');
                }
 ----------------------------------------------------------------------------*/
.md-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: inherit;
    z-index: inherit;
    background-repeat: repeat-x;
}

/*----------------------------------------------------------------------------- 
 $md-color-<color>: Colors of the content (text)
 ----------------------------------------------------------------------------*/
.md-color-white {
    color: #fff;
}
   
/*----------------------------------------------------------------------------- 
 $md-shadow-<x>: Shadows
 ----------------------------------------------------------------------------*/

.md-shadow-0 {
    box-shadow: none;
}

.md-shadow-1 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0
        rgba(0, 0, 0, 0.16);
}

.md-shadow-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
        rgba(0, 0, 0, 0.19);
}

.md-shadow-3 {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
        rgba(0, 0, 0, 0.19);
}

.md-shadow-4 {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0
        rgba(0, 0, 0, 0.21);
}

.md-shadow-5 {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0
        rgba(0, 0, 0, 0.22);
}

.md-menu{
	width: 16em;
	margin: 5% auto;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.md-menu li{
	position:relative; /* submenu posición correcta*/
	list-style: none;       
}

.md-menu a:hover{
	box-shadow: 0em 3em 10em rgba(0, 0, 0, 0.1);
	background: rgba(0, 0, 0, 0.1);	
	background: #E0E0E0;
}

.md-menu li a{         
   	padding: 0 .2em;
   	display:block;
    	font-weight: 500;
}

.md-menu li.parent:hover{
	margin:-1em;  
}

.md-menu li li a{   
	display:block;    
}

.md-menu li ul {
	display: none;
	
	margin:0;      
	left: 100%;
	top:-1em;
  
}


.md-menu .md-js-menu_submenu--open{
	display:block;	
	position: static;
}

.md-js-menu_submenu--open{
	/* Borde menu seleccionado 	*/	
	/*border-top:2px solid #8BC34A; */
	-webkit-transition: all 0.4s ease;
           transition: all 0.4s ease;	
}


.md-menu .md-js-menu_submenu-item--selected{
	background: rgba(0, 0, 0, .12);	
	
}

.md-menu__submenu{	
	padding: 0em;
	background-color: #EEEEEE;

}

/* .md-submenu__item{
	padding-left: 3.5em;        
}  */


/* .md-submenu__item-submenu{
	padding-left: 2em;        
} */

.md_menu_icon,.md-detail-icon{
	color: rgba(0, 0, 0, .54);
	color:#757575;
}

/*.button::after {
	content:"";
	position: absolute;
	height: 100%;
	width: 12%;
	top: 0;
	left: 44%;
	background-color: currentColor;
	text-align: center; 
	opacity: 0;
	pointer-events: none;
	-webkit-transition: width 0.2s, height 0.2s, border-radius 0.6s, left 0.2s, top 0.2s, opacity 0.1s;
	-moz-transition: width 0.2s, height 0.2s, border-radius 0.6s, left 0.2s, top 0.2s, opacity 0.1s;
	-ms-transition: width 0.2s, height 0.2s, border-radius 0.6s, left 0.2s, top 0.2s, opacity 0.1s;
	transition: width 0.2s, height 0.2s, border-radius 0.6s, left 0.2s, top 0.2s, opacity 0.1s;	
}*/

.button:active::after{
	width: 100% !important;
	left: 0;
	top: 0 !important;
	height: 100% !important;
	opacity: 0.12;
	border-radius: 0 !important;
}

/* .button:active{	
	border-top:3px solid #8BC34A;
}*/


/* .md-icon-derecha{
	float:right;
}  */

#query{
	color:#757575;
}

/* mobile: always shown as a list */
	@media screen and (max-width: 63.5em) {
		#query{
	    		background: rgba(0, 0, 0, 0.5);
			padding-left: 10px;
			height:35px;
			background: rgba(0, 0, 0, 0.5) !important;
			display: inline-block;
		        float: left;
		        -moz-box-sizing: border-box !important;
    			-webkit-box-sizing: border-box !important;
    			box-sizing: border-box !important;
    			width: 100%;
		}
	}


.md-submenu__item_submenu{
	position:absolute; 
	right:0px; 
	top:0; 
	/* margin:0; 
	padding:inherit;
	 */
}

/*.md-submenu__item .md-submenu_item_space{
	padding:10px;
	padding-left:3.7em;
}*/

.md-submenu__item .md-submenu_item_space {
    padding: 10px 10px 10px 5em;
    font-size: 0.9em;
}

.md-menu__item li a {
    display: block;
    font-weight: 100;
    padding: 20px 20px 20px 3.7em;
}


/* Línea separatoria de submenu 
.md-menu__submenu  li:last-child{ 
	 border-bottom : 1px solid #757575; 
} */



/*----------------------------------------------------------------------------- 
 $md-list: The list / data table component
 			  (It depends on the page layout)
 ----------------------------------------------------------------------------*/
.md-list {
	width: 100%;
	max-width: 100%;
	margin-bottom: 2rem;
	background-color: #ffffff;
}

	
	.md-list__header {
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 8px;
		padding-left: 0;
	}
	
	.md-list__header__title {
		display: inline-block;
		font-size: 20px;
		padding-top: 16px;
		padding-right: 0;
		padding-bottom: 16px;
		padding-left: 16px;
		color: #424242; /* gray 800 (like content)*/
	}
	
	.md-list__header__subtitle {
		display: inline-block;
		font-size: 20px;
		padding-top: 16px;
		padding-right: 16px;
		padding-bottom: 16px;
		padding-left: 0;
		color: #9E9E9E; /* gray 500  (like filter)*/
	}
	
	.md-list__header__actions {
		float: right;
		color: #9E9E9E; /* gray 500 */
	}

	.md-list__content {
		width: 100%;
		max-width: 100%;
		font-size: 13px;
		font-size: 0.82rem;
		border-collapse: collapse;
		border-spacing: 0;
	}
	
		.md-list__content__items-header {
			font-weight: bold;
			color: #9E9E9E; /* gray 500 */
		}
		
		.md-list__content__item {
			font-weight: lighter;
			color: #424242; /* gray 800 */
		}
		
		.md-list__content__items-header, 
		.md-list__content__item {
			padding: 0;
		 	border-bottom: 1px solid #e0e0e0;	
		}
		
		.md-list__content__items-header > *,
		.md-list__content__item > * {
		  padding: 1rem;
		  text-align: left;
		  vertical-align: top;
		}
		
		.md-list__content__item {
		 	-webkit-transition: all 0.4s ease;
            	    transition: all 0.4s ease;
		}
		
		.md-list__content__item:hover {
	 		background-color: #EEEEEE; /* Grey 200*/
		}
		
			.md-list__content__item__more-distinguishing-content img {
				width: 40px;
			}
				
			.md-list__content__item__more-actions {
				padding: 0;
				text-align: right;
			}
	
		.md-list__footer {
			font-size: 12px;
			color: #9e9e9e; /* gray 500 */
			text-align: right;
		}
	
/*----------------------------------------------------------------------------- 
 $md-list--layout-list: List like layout for md-list (default is like a table)
 ----------------------------------------------------------------------------*/	
	
	/* we set the table position to relative in order to allow correct positioning of the children elements*/ 
	.md-list--layout-list  md-list__content {
		display: block;
		position: relative;
		top: 0;
		left: 0;
	}
	
	/* table header (content items header) is not shown */
	.md-list--layout-list  .md-list__content__items-header {
		display: none;
	}
	
	.md-list--layout-list  .md-list__content__items-header {
		display: none;
	}
		
	.md-list--layout-list  .md-list__content__item {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		min-height: 72px;
	}
	
	.md-list--layout-list  .md-list__content__item__left-content {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 72px;
	}
	
	.md-list--layout-list  .md-list__item__text--line1 {
		display: inline-block;
		position: relative;
		top: 4px;
		left: 0px;
		bottom: 0;
		padding-left: 0;
		padding-bottom: 0;
		margin-bottom: 0;
		margin-left: 72px;
		max-width: 80%;
		overflow: none;
	}
	
	.md-list--layout-list  .md-list__item__text--line2 {
		display: inline-block;
		position: relative;
		top: 4px;
		left: 0;
		padding-left: 0;
		padding-top: 0;
		margin-top: 0;
		margin-left: 72px;
		max-width: 75%;/*max-width: 85%;*/
		overflow: none;
		text-align: justify;
		color: #9E9E9E; /* gray 500 */		
	}
	
	.md-list--layout-list  .md-list__content__item__right-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		color: #9E9E9E; /* gray 500 */
	}

	/* mobile */
    @media screen and (max-width: 63.5em) {
    	.md-list--layout-list  .md-list__item__text--line1 {
    		max-width: 55%; /* For avoid tittle overlap date */ /*max-width: 60%;*/
    	}	
	}
	
/*****
   ESTADO
*****/			
.md-is-not-visible {
	visibility: hidden;
}			

.md-avatar-img {
	border-radius: 100%;
	height: 40px;
	width: 40px;
}


/*----------------------------------------------------------------------------- 
 $md-portada: Portada
 ----------------------------------------------------------------------------*/
.md-whiteframe-container {
    background-color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */	                 
}

.md-whiteframe-grey {		
	display: inline-block;   	
	width: 46%;
	margin-right:2em;
	background-color: #DCDCDC; /*rgba(0, 0, 0, .12);*/
	border-radius: 5px;	
	vertical-align: top;
	text-align:center;
}

/* mobile: display in list */
    @media screen and (max-width: 63.5em) {
		.md-whiteframe-grey{		
			display: block;			
			width:100%;
			/*background-color: #CFCFCF;*/ /*rgba(0, 0, 0, .12);*/	
			background-color:white;				
			/*margin:2em 1em;*/	
		}
	}


.md-index__header__title{	
	padding: 16px;	
	margin: 0;
	vertical-align: middle; /* to align to subtitle */
	font-size: 20px;
	font-weight: normal;
	color: #424242; /* gray 800 (like content)*/
	text-align:left;
}

.md-index__cards{
	margin:0em;
	padding:1em;
	text-align:left;
	
}
.md-index__cards_item{		
	position:relative;
	min-height:225px;	
	z-index: 150; /* to be over of the background image */
    	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19); /* shadow-2 */
    	background-color: white;  
	padding:1em 1em 1em 0;
	border-radius: 5px;	
	
}
/* Cambio diseño cards portada
.md-index__cards__item__image{
	width:30%;	
	height:100%;
	margin-right:3%;	
	position:absolute;
	top:0;
	left:0;
	bottom: 0;    
    	right: 0;
    	overflow:hidden;    	
    	border-top-left-radius: 5px;
    	border-bottom-left-radius: 5px;	
    	
}*/
.md-index__cards__item__image{
	width: 60%;
	height: 100%;
	margin-right: 3%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;    	
}
/* Cambio diseño cards portada
.md-index__cards__item__image img { 	
	margin:-50%;	
}

.md-index__cards__item__content{	
	width:67%;	
	margin-left: 33%;
	right:0;
}*/

.md-index__cards__item__content {
    width: 37%;
    margin-left: 67%;
    right: 0;
    padding-right: 5%;
}

.md-index__cards__item__title{	
	font-weight: 500;
	padding-bottom:1em;
	font-size: large; /*Titulo de los cards más grande*/
}

.md-index__cards__item__date{
	color:#424242;
	font-size:13px;
	padding-bottom:1em;	
}

.md-index__link{
	padding: 16px;		
	text-align:right;
	clear:both;
}

.md-searchList{
   background: rgba(255,255,255,.25);
   border-radius: 0px 2px 2px 0px;
   height: 2.8em;
   border: transparent;
   float: left;
   margin-top: 0.9em;
   color: #fff !important;
   -webkit-text-fill-color: #fff;   
   margin-left: 0; 
}

.md-searchList:-moz-placeholder, .md-searchList::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #fff;
  opacity: 1;
}

.md-icon--iconSearchList{
   background: rgba(255,255,255,.25);
   border-radius: 2px 0px 0px 2px;
   height: 1.55em;
   border: transparent;
   margin-bottom: 0px;
   margin-right: 0px;
   float: left;
   margin-top:12px;
}

/*@media screen and (max-width: 63.5em) {
    
    #iframe_aemet_id41091 {
         display: none !important;
    }
}

#iframe_aemet_id41091{
   width: 256px;
   height: 200px;
   padding: 10px;
   border-top: 1px solid #757575;
   padding-top: 1.4em;
}
#iframe_aemet_id41091 {
	width: 70px;
	/* height: 200px; */
	/* padding: 10px; */
	/* border-top: 1px solid #757575; */
	padding-top: 0.4em;
}
*/


.md-layout--toolbar-extended .md-toolbar__over-sidenav{
   	padding-top: 3.5em;
	-webkit-transition: all 0.4s ease;
           transition: all 0.4s ease;
   }
   
.md-toolbar .md-toolbar__over-sidenav{
	-webkit-transition: all 0.4s ease;
           transition: all 0.4s ease;
}


.md-layout--toolbar-extended .md-toolbar__over-sidenav .md-toolbar__search{
   	padding-top: 3.5em;
	-webkit-transition: all 0.4s ease;
           transition: all 0.4s ease;
}
   
.md-toolbar .md-toolbar__over-sidenav .md-toolbar__search{
	-webkit-transition: all 0.4s ease;
           transition: all 0.4s ease;
}

.md-menu__item, .md-submenu__item{
     visibility:visible;
     opacity:1;
     max-height: 1000px;
     transition: max-height 1s ease-in, visibility 0.85s linear, opacity 0.85s linear; 
}

.md-collapse{
     visibility:hidden;
     opacity:0;
     max-height: 0px;
     transition: max-height 0.85s ease-out, visibility 0.85s linear, opacity 0.85s linear; 
}



.md-menu__item__bottom{
    list-style: none;
    position:relative;
    display: block;
    font-weight: 500;
}

.md-menu__item__bottom-first{
    list-style: none;
    position:relative;  
    display: block;
    font-weight: 500;
    border-top: 1px solid #757575;
}

.md-menudown__item__bottom-first{
    
    border-top: 1px solid #757575;
}
 	

.md-overflow-menu{
	overflow: auto;
	overflow-y: visible;
	overflow-x: hidden;
}

#twitter-widget-0{
	vertical-align:bottom !important;
	border:0;
}

#___plus_0 {
	vertical-align:bottom !important;
	border:0;
}

.fb_iframe_widget {    
    vertical-align: bottom !important;
    display: inline-block !important;
}


.md-share{
	/*margin-left:40em;*/
	position:relative;
	float:right;
	margin-right:1em;
	padding-bottom:0.5em;
}

.md-share_span{
	width:100%;
}

.md-form__lopd {
    font-size: 0.8em;
    color: #7F8C8D;
}

/* Mensaje de aviso para navegadores antiguos */
#sticky{
    z-index: 300;
    opacity: 0.8;
    background-color: #FFF;
    width: 100%;
    position:fixed;
    color:#000;
    text-align: center;
    color:red;
    min-height:3em;
}

#sticky2info{
      z-index: 300;
    opacity: 1;
    background-color: rgba(255,255,255,0.9);
    width: 55%;
    position: fixed;
    color: #000;
    text-align: center;
    /* color: red; */
    min-height: 5%;
    padding: 20px;
    margin-top: 15%;
    margin-left: 15%;
    border-style: groove;
}


@media screen and (max-width: 63.5em) {
    
    .md-icon-button-search{
         float: right;
         margin-top:0px;
    }
}

.md-toolbar__over-sidenav-w100{
	width:100% !important;
} 

#recaptcha-error{

    bottom: 0px;
    left: 1px;
    font-size: 11px;
    padding: 0;
    width: 100%;
    font-weight: lighter;
    color: #F44336;	
}

#md-icon-arrow{
    display: inline-block;
    font-family: 'material-design-icons';
    speak: none;
    color: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 1.5rem;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: rgba(0,0,0,.5);
    margin-left: 16px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 2px 0px 0px 2px;
    float: left;
}

#md-icon-arrow i{
    font-style: normal;	
}

#md-icon-search{
    display: inline-block;
    font-family: 'material-design-icons';
    speak: none;
    color: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 1.5rem;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 0px 2px 2px 0px;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
}

.md-searchInput{
	overflow:hidden;
	margin-right:36px;
}

.md-marginTop40{
	margin-top: -40px !important;
}


.redes {
    /* margin-left: 30px; */
}
/*.md-footer--social{
	padding-right: 250px;	
}*/

.md-footer--social {
    padding-left: 1px;
    display: inline-block;
    vertical-align: top;
    padding-right: 15%;
}

.md-footer--socialIcon {
    display: inline-flex;
    vertical-align: top;
    /* padding-right: 100px; */
}

/*.md-footer--links {
    text-align: center;
    display: inline-flex;
    padding-right: 25%;
}
*/
.md-icon-footer-logo-social {
    display: inline-block;
    padding: 0.1em;
    font-family: 'material-design-icons';
    speak: none;
    color: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 44px;
    /*font-size: 4rem;*/
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}