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

/* MENSAJE OLD BROWSER IE 7.................................................................................................................... */
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; display:none;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:500px; padding:20px 0; margin:-100px 0 0 -250px; background-color:#fff; text-align:center;}
    #CuerpoMensaje h1 { font-style:italic; font-weight:normal;  color: #666; font-size:20px; display:block; margin-bottom:15px;}
    #CuerpoMensaje div { width:100%; margin:0 auto; position:relative;  border-top:1px solid #ccc;}
    #CuerpoMensaje h2 { position:absolute; top:-7px; left:50%; width:100px; margin:0 0 0 -50px; background-color:#FFF; font-size:10px; color:#666;}
    #CuerpoMensaje ul { display:block; margin:15px 0 0 127px; list-style:none;}
    #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,
table,caption,tbody,tfoot,thead,tr,th,td,
article, aside, canvas, details, embed, 
header, main, footer, 
figure, figcaption, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;}

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

a { text-decoration:none !important; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none;	-ms-user-select: none; user-select: none;}
	
/* 1 - SETEOS GLOBALES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;} 

body {   
	margin:0 auto;
	text-align:center; 
	font:normal 11px "ArNarr-regular", Arial, Helvetica, sans-serif;   
  } 

.clear { clear: both;}		

.SafeZone { width:100%; height:100%; font-size:0px; margin:0 auto;}
	 .Viewport { position:relative; width:100%; max-width:1670px; height:100%;  margin:0 auto;
	             -webkit-box-sizing: border-box;
                 box-sizing: border-box;}
				 
* {-webkit-box-sizing: border-box;
   box-sizing: border-box;}

#Construccion { display: flex; flex-direction: column;}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/ 
header { flex: 0 0 auto; padding-top: 8px; padding-bottom: 8px; background:rgba(255, 255, 255, 1);}	
	#ContentHeader { display: flex; gap: 16px;  align-items: flex-end; width: 100%;}
		#Logo { flex: 0 0 auto;}
		#Logo img { max-width:100%; display:block;}
		
		#BarraDatos {flex: 1; display: inline-flex; gap: 24px; align-items: center; justify-content: flex-end;}
			#DireccionPrincipal {text-align:right; }
				#DireccionPrincipal	p { display: flex; gap: 16px; flex-wrap: wrap;}					   
				#DireccionPrincipal p,
				#DireccionPrincipal a { font-size:20px; font-style:normal; color:#58595B;}				

				a.BtnWapp { background: url("imagenes/construccion/wapp.svg") no-repeat 0 100%; background-size: 1em auto; display: inline-block; padding-left: 1.2em;}

			#NavSocial { flex: 0 0 auto; width: 40px;}
				#NavSocial a {  display: inline-block; width: 35px; height: 35px;}
				a[title="Youtube"] { background: url("imagenes/construccion/youtube.svg") no-repeat 0 0; background-size: 100% auto; background-position: 50% 50%;}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/  
main { flex: 1; position:relative; overflow:hidden; width:100%; text-align:left;}
	
/*video home*/
#ModuloVideoHome { position: relative; width: 100%; height: 100%;}
	#ModuloVideoHome a { display: block; text-align: center; width: 100%; height: 100%; }
	#BtnPlayVideo { position: absolute; z-index: 200; width: 100%; height: 100%;
					display: flex; justify-content: center; align-items: center;}

	#ModuloVideoHome figure { width: 100%;}
	#ModuloVideoHome #Poster { margin: 0 auto; max-height: 100%; display: block;
						  		-webkit-transition: all 0.3s ease-in-out;
								transition: all 0.3s ease-in-out;}

	#LoadVideo { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden;
				-webkit-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;}	

		#Loader	{ width: 100%; height: 100%;}
		
		a#CloseVideo { display: none;}
		#LoadVideo iframe { width: 100%; height: 100%;}

/*videomode*/
.videomode #LoadVideo { opacity: 1; visibility: visible;}
.videomode #BtnPlayVideo { display: none !important;}
	
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer { flex: 0 0 auto; width:100%; padding: 20px 0;}
	#SlideLogosFotter {}		
		#SlideLogosFotter li { display: inline-flex; align-items: center; justify-content: center;}
		#SlideLogosFotter img { max-width:100%; display:block; margin:0 auto;}
		
}

@media (hover: hover) and (pointer: fine) {  
	#ModuloVideoHome a:hover #Poster { transform: scale(1.1);}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ANCHOS///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1750px) {
	#ContentHeader { padding-left: 24px; padding-right: 24px;}	
}

@media (max-width: 1320px) {
main {}
	#AnimacionDomino li { width:25%;}
	#AnimacionDomino li:nth-child(n+5) { display:none;}	
}

@media (max-width: 1100px) {
	#ModuloVideoHome #Poster { max-width: 100%; max-height: none;}
	a#triggerVideoHome { display: flex; align-items: center; justify-content: center;}
}

@media (max-width: 1023px) {
main {}
	main .GrupoTexto { margin-left:-365px;}
		main .GrupoTexto h1 { font-size:40px;}
		main .GrupoTexto h2 { font-size:17px;}
		
}

@media (max-width: 990px) {
main {}
	#AnimacionDomino li { width:33.33%;}
	#AnimacionDomino li:nth-child(n+4) { display:none;}		
}

@media (max-width: 780px) {
main {}
	main .GrupoTexto { width:auto; top:40%;  margin:-50px 0 0 0; padding:15px; background-color:rgba(255, 255, 255, 0.9);
						-webkit-transform: translateX(-50%);			
		 				transform: translateX(-50%);}
		
		main .GrupoTexto h1 { width:100%; text-align:center; font-size:30px;  line-height:33px; padding:0px; background:none;}
			main .GrupoTexto h1 br { display:block;}
			
		main .GrupoTexto h2 { width:100%; margin-left:0px; text-align:center; padding:0px; background:none;}
			main .GrupoTexto h2 span { display:block;}

	#ContentHeader { align-items: center;}
		#DireccionPrincipal p { gap: 8px;}
}


@media (max-width: 640px) {
header {}
	#Logo { width:150px;}	
	#DireccionPrincipal p { gap: 24px;}
	a.BtnWapp { font-size: 0 !important; width: 30px; height: 30px; display: block; background-size: 30px auto; padding: 0;}
	a.Mail {font-size: 0 !important; width: 30px; height: 30px; display: block; background-size: 30px auto !important; padding: 0; background: url(imagenes/construccion/mail.svg) no-repeat 0 0;}
	
main {}
	#LoadVideo { position: fixed; background-color: #000; padding: 48px;}
	#Loader { width: 100%; height: 100%;}

	a#CloseVideo { display: block; position: absolute; z-index: 200; top: 16px; right: 16px; width: 40px; height: 40px;  background: url(imagenes/construccion/close.svg) no-repeat 0 0; background-size: 40px auto;
					filter: invert(); cursor: pointer;}


}