@font-face{ font-family: "Max-regular"; src: url('fonts/Max-regular.otf') format('opentype');}
@font-face{ font-family: "ArNarr-regular"; src: url('fonts/ArNarr-regular.ttf') format('truetype');}


/* MENSAJE OLD BROWSER IE 9 >.................................................................................................................... */
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:600px; padding:20px 0; margin:-100px 0 0 -300px; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { float:left;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-decoration:none; font-size:12px; color:#666;}
    

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {	
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer, 
article, aside, canvas, embed, 
picture, figure, figcaption, hgroup, 
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;                          
                          box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 { font-weight:normal;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;                                
                                    box-sizing: border-box;}
    
/*HTML 5*/
header, main, footer,
article, aside, canvas, embed, 
picture, figure, figcaption, hgroup, 
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
 
/*LOADER*/
#Loader { -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
#Loader.off { opacity:0; visibility:hidden; }

/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;} 
html { font-size:18px  /*1rem = 18px*/ }

body {   
    margin:0 auto;
    text-align:center;
	font-family: "Max-regular", Arial, Helvetica, sans-serif;
  } 

.SafeZone { width:100%; height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; height:100%; padding:0 15px;  margin:0 auto;}	 

/*LOGIN::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#LoginPage{ background:#63B6E6 url(imagenes/elipse-grow.jpg) no-repeat center center;}
	#LoginBox { position:absolute; top:50%; left:50%; width:100%; max-width:400px; text-align:center; background:#fff; padding:40px;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);}			
		
	#FormLogin {font-family: "Max-regular", Arial, Helvetica, sans-serif; text-align:left;}	
		#LogoLogin { width:50%; display:inline-block; vertical-align:bottom;}
			#LogoLogin img { max-width:100%; display:block;}
		
		p#TxtLogin { width:50%; display:inline-block; vertical-align:bottom; font-size:2.3rem; color:#000; text-align:right;}
		
		#MainInput { display:block; margin:15px 0;}
			#FormLogin input#email,
			#FormLogin input#password,
			#FormLogin input#emailrecuperar { width:100%; display:block; height:45px; font-family: "Max-regular", Arial, Helvetica, sans-serif; font-size:1.1rem; padding:0 10px; margin-bottom:10px; border:1px solid #E1E1E1;
											  -webkit-transition: border-color 0.3s ease-in-out;
											  transition: border-color 0.3s ease-in-out;}		
		
			#FormLogin input#ingresar,
			#FormLogin input#recuperar { width:100%; display:block; border:none; padding:10px 0; margin-top:20px;}
			
			#PanelOlvido {display:block;}					
				a#BtnOlvidoPass { display:block; margin:10px 0; font-size:13px; color:#000; background:url(imagenes/icono-recuperar.svg) no-repeat left center; text-align:left; padding: 10px 0 10px 40px; cursor:pointer;
								-webkit-transition: -webkit-transform 0.3s ease-in-out;
								transition: transform 0.3s ease-in-out;}								
				
				#FormOlvido { position:relative; overflow:hidden; max-height:0px; text-align:left;
							  -webkit-transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
							  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;}	
							 
					#FormOlvido label { font-size:1rem; color:#333; text-align:left; display:block; margin-bottom:5px;}
					#FormLogin input#recuperar { margin-top:10px;}
		
		
		/*botones colores*/
		.naranja { font-family: "Max-regular", Arial, Helvetica, sans-serif;  font-size:1rem; border-radius:3px; color:#FFF; padding:10px 15px; background-color:#EF9701; cursor:pointer;
					-webkit-transition: background-color 0.3s ease-in-out;
					transition: background-color 0.3s ease-in-out;}
					
		.Desktop .naranja:hover { background-color:#00184A;}
		
		.azul { font-family: "Max-regular", Arial, Helvetica, sans-serif;  font-size:1rem; border-radius:3px; color:#FFF; padding:10px 15px; background-color:#00184A; cursor:pointer;
					-webkit-transition: background-color 0.3s ease-in-out;
					transition: background-color 0.3s ease-in-out;}
					
		.Desktop .azul:hover { background-color: #333;}
				
		/*Desktop*/
		.Desktop #FormLogin input#email:hover,
		.Desktop #FormLogin input#password:hover,
		.Desktop #FormLogin input#emailrecuperar:hover {border-color:#000; }		
		
		/*olvidomode*/
		.olvidomode a#BtnOlvidoPass { -webkit-transform: translateY(20px);
									  transform: translateY(20px);}
		.olvidomode #FormOlvido { padding-top:20px; padding-bottom:20px; max-height:500px;}
		/*..........*/
		
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/ 
header.General {width:100%; text-align:right; background-color:#fff;}

    #Logo { float:left; padding:10px 0;}
        #Logo a { display: block;}
        #Logo img { max-width: 100%; display: block;}
    
    #Menus { display:inline-block; vertical-align:bottom; margin-right:40px;}
		#Menus ul { list-style:none; vertical-align:top;}
		
		#MenuGeneral { display:inline-block; text-align: right;}
			#MenuGeneral > li { display: inline-block; vertical-align: middle;}			 			
			#MenuGeneral > li > a { position:relative; display: block; text-align:center;  font-size:0.85rem; color:#555555; padding:0 15px; border-left:1px solid #CCC;
									-webkit-transition: color 0.3s ease-in-out;
					 				transition: color 0.3s ease-in-out;} 
			#MenuGeneral > li:first-child a { border:none !important;}
			
			/*select*/
			#MenuGeneral li.select a { color:#00184A; cursor:default;}
			#MenuGeneral li.select a::after { content:""; position:absolute; z-index:200; left:0; bottom:-25px; width:100%; height:3px; background-color:#00184A;}
			/*......*/
			
			/*Desktop*/
			#MenuGeneral > li > a:hover { color:#000;}
			/*....*/
			
	#Login { position:relative; display:inline-block; vertical-align:top; padding:10px 25px 0 20px; text-align: left; border-left:1px solid #CCCCCC;}
		#Login p { font-size:0.7rem;}
		#Login p#NombreUsuario { margin-top:5px;}			
		a#BtnLogout { position:absolute; top:5px; right:0; width:25px; height:25px; background:url(imagenes/btn-cerrar.png) no-repeat 50% 50%; background-size:25px 25px; cursor:pointer;
					 -webkit-transition: color 0.3s ease-in-out;
					 transition: color 0.3s ease-in-out;}
		
		/*Desktop*/
		.Desktop a#BtnLogout:hover { color:#000;}
		/*....*/
		
    /*Mobile*/
    a#BtnMobile { display:none;}
    /*......*/
    
    header .Viewport:after { content:""; display: block; clear:both;}
	
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/  
main {width:100%; text-align:left;}	  
	
	main#Dividido { display:table; width:100%; height: calc(100% - 62px - 30px); background-color:#CCC;}
		
		#MenuFiltros { display:table-cell; vertical-align:top; width:180px; background-color:#EBEBE4;}
			#MenuFiltros header { padding:5px 10px 4px 10px; background:#598ABC url(imagenes/fondo-filtros.jpg) no-repeat 0 0;} 
			#MenuFiltros h2 { text-align:right; font-size:0.8rem; color:#FFF;}
			
			#Filtros { padding:10px 10px 30px 10px;}
				#Filtros fieldset { margin-bottom:10px;}
				#Filtros label { font-size:0.8rem; color:#000; display:block; margin-bottom:5px;}
				#Filtros select { width:100%;/* padding:5px; font-size:0.7rem; color:#666; border:1px solid #999;*/}
		
		#Mapa { position:relative; display:table-cell; height:100%; vertical-align:top;}
			.Pin {}
			
			#ContentTooltip, #ContentTooltipInf { position:absolute; z-index: 100; width:100%; height:100%; z-index:100; display:flex; opacity:0; visibility:hidden;
							  -webkit-transform-origin: 50% 50%;
							  transform-origin: 50% 50%;
							  -webkit-transform: scale(0.8);
							  transform: scale(0.8);
							  -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
							  transition: transform 0.3s ease-in-out, opacity 0.3s ease-out, visibility 0.3s ease-out;}
			#ContentTooltipInf {  z-index: 120;}				  
				#Tooltip, #TooltipInf { position:relative; margin:auto; background-color:#FFF; }	
					
					a#BtnCerrarTooltip, a#BtnCerrarTooltipInf { position:absolute; top:5px; right:10px; width:30px; height:30px; border-radius:3px; display:block; background:#fff url(imagenes/btn-cerrar.png) no-repeat 50% 50%; cursor:pointer;}
					
					#OrigenPin,#OrigenPinInf { width:100%; padding:10px; color:#fff; background-color:#EF9701;}
						p.Provincia { font-size:0.9rem; font-weight:normal;}
						p.Ciudad { font-size:0.7rem;}
					
					table, tr, th, td {  border-collapse: collapse; vertical-align: middle; font-family: "Max-regular", Arial, Helvetica, sans-serif;}
					table.DataPin { display:inline-table; vertical-align:top; max-width:300px;}
						table.DataPin tr:nth-child(even) td { background-color: #fff;} 
						table.DataPin tr:nth-child(odd) td { background-color: #f2f2f2;}
						
						table.DataPin tr td:last-child { background-image:url(imagenes/divisor.gif); background-repeat:no-repeat; background-position:right top;}
						table.DataPin:last-child tr td { background-image:none !important;}
						
						table.DataPin tbody td { padding:10px; font-size:0.8rem; text-align:left; border-bottom:1px solid #CCC;}

			/*open*/
			#ContentTooltip.open, #ContentTooltipInf.open { opacity:1; visibility:visible;
									-webkit-transform: scale(1);
							  		transform: scale(1);}
			/*.....*/
			
			/*fixedflex*/
			.fixedflex #ContentTooltip, .fixedflex #ContentTooltipInf {}
			.fixedflex #Tooltip, .fixedflex #TooltipInf { position:absolute; top:0; left:50%;
								 -webkit-transform: translate(-50%, 0);
							 	 transform: translate(-50%, 0);}
			/*.....*/
	
	#ContenedorMapa { position:relative; overflow: hidden; width: 100%; height: 100%;}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.General {width:100%; text-align:left; padding:8px 0 0 0;}	
	p#Copy { color:#000; font-size:0.7rem; text-align: left;}		
	
  
/*INTERNAS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*.........................................................................................................................................*/
.SafeZone * { line-height: 1.2em !important;}

/*Modal General*/
#ModalGeneral {position:fixed; overflow:hidden; z-index:9900; top:0; left:0; padding:15px; background:rgba(1, 29, 52, 0.9); width:100%; height:100%; opacity:0; visibility:hidden;
				 display: flex; align-items: center; justify-content: center;
				-webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
					  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
		
		
	#ModalGeneral .ContentModal { position:relative; width:90%; max-width:320px; padding:30px; background-color:#FFF;}
		a#BtnCerrarModalGeneral { position: absolute; top:0; right:0px; width:60px; height:60px; background:url(imagenes/btn-cerrar.png) no-repeat 50% 50%; cursor:pointer;}
		
		p.TituloModal {font-family: "Max-regular", Arial, Helvetica, sans-serif; font-size:1.8rem; display:block;}
		p.TxtModal { font-size:1.1rem; max-width:300px; margin:10px auto 15px auto; display:block;}
		
		
		a#BtnOk { display:inline-block;}
		a.TriggerModal { display:block;}
		
		/*Desktop*/
		.Desktop a#BtnCerrarModalGeneral:hover { opacity:0.7;}
		
		/*modalmode*/
		.modemodalgeneral { overflow:hidden; }
		.modemodalgeneral #ModalGeneral { opacity:1; visibility:visible; overflow-x:auto;}
		/*..........*/
		
		/*fixedflex*/
		.fixedflex #ModalGeneral .ContentModal { position:absolute; top:50%; left:50%; 
												 -webkit-transform: translate(-50%, -50%);
			 									 transform: translate(-50%, -50%);}
		
/*CONTACTO::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*main*/
#Contacto main,
#MisDatos main{ background:#63B6E6 url(imagenes/elipse-grow.jpg) no-repeat center center;}
	
	#FormContacto { min-height:400px;  width:100%; max-width:500px; margin:0 auto; padding:60px 0;}
		#FormContacto h2 { font-family: "Max-regular", Arial, Helvetica, sans-serif; font-size: 1.2rem; margin-bottom:15px; color:#00184A;}
		
		#FormContacto input#nombre,
		#FormContacto input#apellido,
		#FormContacto input#email,
		#FormContacto input#telefono,
		#FormContacto input#usuario,
		#FormContacto input#password,
		#FormContacto textarea#mensaje { width:100%; display:block; height:45px; font-family: "Max-regular", Arial, Helvetica, sans-serif; font-size:1rem; padding:0 10px; margin-bottom:10px; border:1px solid #E1E1E1;
										 -webkit-transition: border-color 0.3s ease-in-out;
										  transition: border-color 0.3s ease-in-out;}
		
		#FormContacto textarea#mensaje { height:200px; overflow:auto; padding:10px; margin-bottom:10px;}
		
		#cambiar-pass { display:block; padding:15px 0; margin-top:20px; border-top:1px solid #fff;}
			#FormContacto input#usuario,
			#FormContacto input#password { width:calc(50% - 5px) !important; display:inline-block; vertical-align:top;}
			
			#FormContacto input#usuario { margin-right:5px;}
			#FormContacto input#password { margin-left:5px;}	
		
			#cambiar-pass div input { display:inline-block; vertical-align:middle; margin-right:5px;}
			#cambiar-pass div label {display:inline-block; vertical-align:middle; font-size:0.8rem;}
		
		#FormContacto input#enviar { width:100%; display:block; border:none; padding:10px 0; margin-top:10px; cursor:pointer;}
		
		/*Desktop*/
		.Desktop #FormContacto input#nombre:hover,
		.Desktop #FormContacto input#apellido:hover,
		.Desktop #FormContacto input#email:hover,
		.Desktop #FormContacto input#telefono:hover,
		.Desktop #FormContacto input#usuario:hover,
		.Desktop #FormContacto input#password:hover,
		.Desktop #FormContacto textarea#mensaje:hover {border-color:#000; }	

		/*........*/	

}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ANCHOS///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 15px; /*1rem = 15px*/}    
}


@media (max-width: 1300px) { 
.Viewport { padding:0 15px !important;}
}

@media (max-width: 470px) { 
/*LOGIN*/
	#LoginBox { width:calc(100% - 25px);}
}

@media (max-width: 340px) {
/*LOGIN*/
	#LoginBox { padding:25px;}
}

/*ALTOS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media (max-height: 720px) {
/*LOGIN*/
#LoginBox { top: 120px;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);}
}