/*  

----------Variables ---------
para declarar una variable = --main-texto-principal:rgb(47,47,47);
para imprimir una variable = Color: var(--main-texto-principal);

----- Calculos con variables -----

Dentro de la propidedad declaro la funcion calc y las variables con espacio segun la regal matematica + - / *
 calc(100% - var(--main-margin-principal) - var(--main-padding-principal));


---- Listado de Variables ---- 
*/ 
:root {
  /*----- Colores ------- */			
  --main-bacground-principal:rgba(0,0,0,0.9); /*utilizo en encabezados*/
  --main-background-pie:rgba(0,0,0,0.9);
  --main-background-pie-div:none;
  --main-background-pie-div-li:none;
  
  --main-background-submenu: rgba(0,0,0,0.6);
  --main-background-submenu-cerrar : rgba(0,0,0,0.6);
  
  --main-background-menu-movil-icono:rgba(254,215,0,0.9); 
  --main-background-menu-movil-li:rgb(250,250,250);  
  --main-background-contenedor: rgb(255,255,255);
  --main-background-color-ancho-fijo : none;
  --main-background-formulario-form:rgba(255,255,255,0.9);
  
  --main-background-formulario-input:none;
  --main-background-formulario-input-border:rgb(220,220,220);
  
  
  
  /* Galerias */
  --main-background-galeria-clientes:none;
  --main-background-galeria-clientes-logo:none;
  --main-background-galeria-clientes-span:red;
   
  --main-background-galeria-clientes-sin-logo:none;
  --main-background-galeria-clientes-sin-logo-span:rgba(0,0,0,0.2); 
  
  /*Boton*/
   --main-background-formulario-form-boton:var(--main-bacground-principal);
   --main-background-formulario-form-texto-boton:white;
   
  
  --main-background--popup:rgba(250,250,250,0.95);
  --main-background-encabezadoD:rgba(250,250,250,0.5);    
  
  /*----- Colores texto -----------*/
  
  --main-color-texto-menu: white;
  --main-texto-principal:rgb(47,47,47);
  --main-color-prinicpal-negativo:white;
  --main-texto-color-menu-li-a:rgb(47,47,47);
  --main-color-pie-div-li:white;
  --main-color-pie-div-li-a:red;
  --main-color-formulario-input:var(--main-texto-principal);
 
  
  --main-texto-color-galeria-clientes-h3:white;
  --main-texto-color-galeria-clientes-p:white;
  --main-texto-color-galeria-clientes-sin-logo-h3:white;
  --main-texto-color-galeria-clientes-sin-logo-p:white;
  
   
  /*----- Margin y padding ------- */
  --main-margin-principal: 20px;   
  --main-margin-menor:5px;
  
  --main-margin-ancla:calc( var(--main-logo-web) + var(--main-margin-principal) );
  
  --main-padding-principal:20px;
  --main-padding-menor:5px;  
  
  --main-Margin-padding-auto: auto;  
  
  
  /*----- Fondos Imagenes --------
  Ej: url(../interfaz/diseno/sin_imagen.jpg) */
  --main-backImage-encabezado: none ;
  --main-backImage-pie: none ;
  --main-menu-movil-icono:url(../interfaz/iconos/icono-menu-movil_blanco.png);
  --main-submenu-icono-cerrar:url(../interfaz/iconos/cerrar1.png);
  --main-background-imagen-ancho-fijo:none;
  
  
  
  /* ----- Tamaños de fuentes texto -----
  (tamaños de H1,h2,h3 en cada clase ) */
   
  --main-texto-size-principal:18px;
  --main-texto-size-menu:18px;
  --main-texto-size-menu-movil-li:18px;
  --main-texto-size-pie-div-li:14px;
  --main-texto-size-galeria-clientes-sin-logo-h3:16px;
  
  
  
  --main-texto-size-pie-div-li-alineacion:center;
  
  
  
  /*----- Anchos -----*/
  --main-ancho-fijo:80%;
  --main-Alto-menu-movil-li:60px;
  
  /* Alturas hipervinculos y botones */
  --main-altura-hiper-menu:60px;
  --main-logo-web:120px;
  --main-logo-movil:80px;  
  --main-logo-pie:150px; 
  
  /*Boton*/
  --main-altura-formulario-form-boton:60px;
  
  
  /*----- Visible o no visible ---- */
  --main-visiblity-encabezadoD:hidden;
  --main-display-encabezadoD:none;
  
  
  --main-visiblity-galeria-clientes-sin-logo-p:hidden;
  --main-display-galeria-clientes-sin-logo-p:none;
  
  /*----- cantidades de impresion ----*/
  --main-pie-div-cantidad:3;
  
}



/*Css Generales */
html, body, #desarrollo { 
    width:100%; 
	font-family:Arial,calibri,Helvetica,sans-serif; 
	font-size:var(--main-texto-size-principal); 
	color: var( --main-texto-principal);	
} 

body{
	position: relative;
	margin:0px;
	padding:0px;
    overflow: auto;
	background-size:cover;	
}


/* hipervinculos a */
a { text-decoration:none; color:var(--main-texto-principal);}
a img{border:0px;}


/* Clases titulos h1,h2,h3*/

h1,h2,h3 {  
	display: block; 
	font-weight:700; 
	margin: var(--main-margin-principal);
	padding-top: var(--main-padding-principal);	
	padding-bottom: var(--main-padding-principal);	
	color: var(--main-texto-principal);
	}

h1 {
    WIDTH: calc(100% - var(--main-margin-principal) - var(--main-padding-principal));
    font-size: 40px;
    line-height: 60px;      
   }
   
h2 { font-size:30px; }
h2 a {margin:10px;}


h3 {font-size:25px;}
   

@media only screen and (min-width :0px) and (max-width :300px){ h1 { font-size: 30px; line-height: 40px; }}
@media only screen and (min-width :301px) and (max-width :400px){ h1 { font-size: 35px; line-height: 50px; }}
	

p { 
    line-height: 30px;
    letter-spacing: -1px;
    word-spacing: 0.25em;
    margin: var(--main-margin-principal);
    padding: var(--main-Margin-menor);
    width: calc(100% - var(--main-margin-principal) - var(--main-padding-menor)) ;
   }
 

/* Valores de fondo iguales */

#encabezado, #menu_movi, #contenedor, .ancho_fijo, .ancho_fijo_auto, .ancho_fijo_auto_pie, 
.seccion_auto, #pie_de_pagina {
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


#encabezado,#menu_movil 
	{ 
	width: 100%; height:auto; margin-top: 0px;
	position: fixed;      
	background-blend-mode: overlay; 
	background-color: var(--main-bacground-principal);    /*Se puede poner ambos juntos*/ 
	background-image: var(--main-backImage-encabezado); 
    z-index: 2;	
	}

#encabezado div {  Position: relative;    height: auto;    display: flow-root;}

#encabezado a  {
	display: block;
	float:left; /*Se utiliza segun posicion de imprecion */
    width: auto;
    height: var(--main-altura-hiper-menu); 	
    margin: calc(var(--main-padding-menor) * 2);	
    padding: var(--main-padding-menor);	
    padding-left:  calc(var(--main-padding-menor) * 2);
    padding-right: calc(var(--main-padding-menor) * 2);	
    font-size: var(--main-texto-size-menu);
	font-weight: 100;
	text-align: center;
    text-transform: uppercase;
	line-height: var(--main-altura-hiper-menu);		
	color: var(--main-color-texto-menu);	
    }
	
	
/* clase nueva */
.logo { 
    width: var(--main-logo-web) !important;   
	height: var(--main-logo-web)!important;   
	padding-left: var(--main-padding-principal) !important;	
	padding-right: var(--main-padding-principal) !important;    
	position: absolute;
      }	
.logo img { width: 100%;    height: 100%;    object-fit: contain;    background-position: 0;    }
.logo ~ a { float:right !important;}	/*todos los hipervinculos a la derecha del logo asi la derecha*/

/* ADVERTENCIA solo se utiliza cuando el logo va centrado */
a ~ .logo {  position: absolute;    left: 0px;    right: 0px;}

.encabezado_d {  /*Los A hipervi, los toma del encabezado crear valores */
	visibility:var(--main-visiblity-encabezadoD);    
	display:var(--main-display-encabezadoD) !important;    
	width:100%;
	height:auto;
	background: var(--main-background-encabezadoD); 
	}
  
  
 
  
  
#menu_movil {display:none; visibility:hidden; }
#menu_movil > .logo {
	width: var(--main-logo-movil) !important;    
	height:var(--main-logo-movil) !important;  
	position: none !important; 
	padding: var(--main-padding-principal) !important; }


#menu_movil div {    float: right;
    width: 50px;
    height: 50px;
    background: white;
    margin: calc(var(--main-margin-principal) / 1);	
    background-blend-mode: initial;
    BACKGROUND:var(--main-background-menu-movil-icono);
    background-image:var( --main-menu-movil-icono);    
	background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;  
    z-index: 5;
    border-radius: 10px;
	}


@media only screen and (min-width :0px) and (max-width :1105px) { /* Muestro el menu segun condision Responsive*/
	#menu_movil {display: block;    visibility: visible; }
	}


#sub_menu  {
	position:fixed;
    display: block;
	width: 75%;
    max-width: 300px;
	height:calc(100% - 10px - 20px - var(--main-logo-movil) - var(--main-margin-principal) - );
    top: calc(10px + var(--main-logo-movil) + var(--main-margin-principal));
	bottom:var(--main-margin-principal);
	right: -100%;/*para ocultarlo */
	
	z-index:100; 
    overflow: auto;
    padding: var(--main-padding-principal);  
 
    background: var(--main-background-submenu);
    overflow: auto;
    overflow-x: hidden;
	
    transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 1s, 1s, 1s;
    -webkit-transform-style: all;
}


#sub_menu span{ 
    float: right;
    height: 50px;
    width: 50px;
	border-radius: 50px;    	
    /* border: 1px solid white; */
    /* border-bottom: 2px solid rgb(155,155,155); */    
    margin-bottom: calc( var(--main-margin-principal) / 2 );
	background-color: var(--main-background-submenu-cerrar);
    background-image: var(--main-submenu-icono-cerrar);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}


#sub_menu li { 
	position: relative;
    width: calc(100% - var(--main-padding-menor) * 2);	
    min-height: var(--main-Alto-menu-movil-li); 
    padding: var(--main-padding-menor);    
    margin-top: var(--main-margin-menor) !important;
    margin-bottom: 0px;	
    float: left;
    background: var(--main-background-menu-movil-li);
	list-style: none;
    /* border-bottom: 1px solid rgb(42,86,127); */	
	font-size: var(--main-texto-size-menu-movil-li);
    text-transform: uppercase;	
	transition-timing-function: linear, linear;
    transition-delay: 0s;
    transition-duration: 0.5s, 0.5s, 0.5s;
    -webkit-transform-style: all;	
	}
		
	
#sub_menu li a{   
    max-width: calc(100% - var(--main-padding-principal) * 2);
	line-height: var(--main-Alto-menu-movil-li);    
    text-align: left;
	color:var(--main-texto-color-menu-li-a);
    padding: var(--main-padding-principal);
   	}
	
.ancho_fijo_auto_pie {Display:flex;} /*Nivelo altura ded Divs*/

#pie_de_pagina {
	width: 100%;  
	background-color: var(--main-background-pie);
	background-image:var(--main-backImage-pie); 
	position: relative; 
	}
	
/*posiciono el logo con la clase logo mismas alturas*/


#pie_de_pagina div > .logo {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
	margin: auto;
	width: var(--main-logo-pie) !important;    
	height:var(--main-logo-pie) !important;  
	}


#pie_de_pagina div div {
	position:relative;
	width:calc(var(--main-ancho-fijo) - var(--main-margin-principal) / var(--main-pie-div-cantidad)); 
	margin:var(--main-margin-principal);  
	float:left; 
	background-color:var(--main-background-pie-div);
	}

#pie_de_pagina div div li { 
	position: relative;
    width: calc(100% - var(--main-padding-menor) * 2);	
    padding: var(--main-padding-menor);    
    margin-top: var(--main-margin-menor) !important;
    float: left;
    background: var(--main-background-pie-div-li);
	list-style: none;
    /* border-bottom: 1px solid rgb(42,86,127); */
	color:var(--main-color-pie-div-li);	
    text-transform: uppercase;	
	font-size:var( --main-texto-size-pie-div-li);
	text-align:var(--main-texto-size-pie-div-li-alineacion);
	}		
	
#pie_de_pagina div div li h3 { 
	color:var(--main-color-pie-div-li);	
	}
	
#pie_de_pagina div div li a{
    max-width: calc(100% - var(--main-padding-principal) * 2);
    text-align: center;
    color: var(--main-color-pie-div-li-a);  
   	}	
									  
#desarrollo {background: black; text-align: center; min-height: 50px; color: white; }
#desarrollo a {color:white;}
#desarrollo img{width: 180px;  padding:var(--main-margin-principal);} 


/*---------------Clases por diseño ----------*/

#contenedor {
	position: absolute;	
    width:100%;
    height: auto;    
	top: 0px;
    right: 0px;
    background-color: var(--main-background-contenedor);
    z-index: 1;
}

.ancho_fijo{position: absolute;}
.ancho_fijo, .ancho_fijo_auto, .ancho_fijo_auto_pie {
	width:var(--main-ancho-fijo); 
	left:0px; 
	right:0px; 
	margin:auto; 
	z-index:50;
	background-color:var(--main-background-color-ancho-fijo);
	background-image:var(--main-background-imagen-ancho-fijo);
	}

.seccion_auto {	overflow:hidden; width:100%; margin:0px; }
.seccion_autoc{ clear: both;    width: 100%;    height: 1px;    color: white;    margin: 0px !portant;    padding: 0px !important; }	

.seccion_autoc_menu{clear:both; width:100%; height:130px;}	


.left {float:left;} /*Actualizado*/
.right, .right_a  {float:right;}


.margin_principal {  margin-top: calc( var(--main-logo-web) + var(--main-margin-principal) ) !important;  }
.ancla {   position: absolute;    margin-top:var(--main-margin-ancla);}

.titulo {   height: auto !important;    min-height: 0px !important;   margin-top: var(--main-margin-principal);}
.titulo hr {display:none; visibility:hidden;}

.caja_texto { /* Classe Nuneva */
	display: block;	
    width: calc(90% - var(--main-padding-principal)) ;
    height: auto;
    position: relative;    
    margin: var(--main-Margin-padding-auto);	
	padding: var(--main-padding-principal);
}

.datos li{
	position: relative;
    width: calc(100% - var(--main-padding-menor) * 2);	
	margin: var(--main-margin-principal);
    padding: var(--main-Margin-menor);
	margin-bottom: 0px;
    float: left;
  	list-style: none;
}

/*------------------ Titulos por clase------------------*/
.titulo h1 { text-transform:uppercase;}

.diseno_5 div > .titulo h1 { text-align: center;  color:var(--main-color-prinicpal-negativo); }




/*-------------------- GALERIA PARAMETROS SI MUESTRA O NO DESCRIPCION ---------------------*/

.galeria_simple {width:calc(100% -  var(--main-margin-principal) - var(--main-padding-principal) ); margin: var(--main-margin-principal); padding:var(--main-padding-principal);  }

.galeria_sin_descripcion {POSITION: RELATIVE;		}
.galeria_sin_descripcion span {visibility:hidden; display:none; } /*oculto descripcion */
.galeria_sin_descripcion img {
	margin-top: 0px;
    display: block !important;
    position: relative;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
   }

 .galeria { position: relative;    overflow: hidden; } 

/*------------------glaeria_clientes------------------*/
.galeria_clientes {	/*esta muestra span y logos */
	POSITION: RELATIVE;	
	margin: var(--main-margin-principal); 
	padding:var(--main-padding-principal);  
	background-color:var(--main-background-galeria-clientes);
	}
	
.galeria_clientes img {
    display: block !important;
	position: relative;
	max-width: 100% !important;  
    object-fit: contain !important;   
    background:var(--main-background-galeria-clientes-logo);
   }	
   	
.galeria_clientes span{   
	position:relative;
    visibility: visible;
    display: block;
    height: auto;
    width: 100%;
    min-height: 150px;
    background: var(--main-background-galeria-clientes-span);
	}

.galeria_clientes span h3 { color: var(--main-texto-color-galeria-clientes-h3) !important;}		
.galeria_clientes span p {  color: var(--main-texto-color-galeria-clientes-p) !important; }	
	

.galeria_clientes span h3, .galeria_clientes span p  { 
    text-align:center;
    text-transform: uppercase;
    FONT-WEIGHT: 100;
	}	

.galeria_clientes_sin_logo {	
	POSITION: RELATIVE;		
    width: calc( 100% - ( var(--main-margin-principal) * 3)) !important;
	margin: var(--main-margin-principal); 
	padding:var(--main-padding-principal);  
	background-color:var(--main-background-galeria-clientes-sin-logo);
	}
	
.galeria_clientes_sin_logo img {
    display: none !important;
	visibility:hidden;
   }	   
	
.galeria_clientes_sin_logo span{   
	position:relative;
    visibility: visible;
    display: block;
    height: auto;
    width: 100%;
    min-height: 150px;
    background: var(--main-background-galeria-clientes-sin-logo-span);
	}

.galeria_clientes_sin_logo span h3 { 
	color: var(--main-texto-color-galeria-clientes-sin-logo-h3) !important;
	font-size:var(--main-texto-size-galeria-clientes-sin-logo-h3);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	height: 50px; /*medida a ojo*/
	margin: auto;
	}		
	
.galeria_clientes_sin_logo span p { 
	display:var(--main-display-galeria-clientes-sin-logo-p); 
	visibility:var(--main-visiblity-galeria-clientes-sin-logo-p);
	color: var(--main-texto-color-galeria-clientes-sin-logo-p) !important; }		

.galeria_clientes_sin_logo span h3, .galeria_clientes_sin_logo span p  { 
    text-align:center;
    text-transform: uppercase;
    FONT-WEIGHT: 100;
	}

		
@media only screen and (min-width :0px) and (max-width : 900px){.galeria_clientes {margin:10px;} .galeria_clientes span h3 {font-size:15px;} }	
@media only screen and (min-width :900px) and (max-width : 1300px){.galeria_clientes {margin:10px;} .galeria_clientes span h3 {font-size:18px;} }	
	
	
/*------------------------------- Formulario, input dentro de esta categoria 	------------------------------------------*/	

*::-webkit-input-placeholder {    /* Google Chrome y Safari */    color: gray;} 
*:-moz-placeholder {    /* Firefox anterior a 19 */    color:gray;}
*::-moz-placeholder {    /* Firefox 19 y superior */    color: gray;} 
*:-ms-input-placeholder {    /* Internet Explorer 10 y superior */    color:gray;}


.formulario_index form {
    width: calc(100% - var(--main-margin-principal) - var(--main-padding-principal));
    height: auto;
    min-height: 570px;
    padding: var(--main-padding-principal);
    background: var(--main-background-formulario-form);
    border-radius: 10px;
}

.formulario_index form p{ text-align: left; margin-left: 0px; }

.formulario_index form input[type="text"], .formulario_index form input[type="email"], .formulario_index select  { 
    width: calc(100% - var(--main-margin-principal) - var(--main-padding-principal));
    HEIGHT: 60PX;
    PADDING: var(--main-padding-principal);
    margin: var(--main-margin-principal);
	padding-top:var(--main-padding-menor);
	padding-bottom:var(--main-padding-menor);
	margin-top:var(--main-margin-menor);
	margin-bottom:var(--main-margin-menor);
    background:var( --main-background-formulario-input);
	border:0px;
    border-bottom: 2px solid var(--main-background-formulario-input-border);
    color: var(--main-texto-principal);
	}
	
.formulario_index textarea {
	width: calc(100% - var(--main-margin-principal) - var(--main-padding-principal));
    height: 150px;
	PADDING: var(--main-padding-principal);
    margin: var(--main-margin-principal);
	border: 2px solid var(--main-background-formulario-input-border);
    background: var( --main-background-formulario-input);
    color: var(--main-texto-principal);}	
	
	
.formulario_index input[type="submit"] {
    width: auto;
    float: right;
    PADDING: var(--main-padding-principal);
    margin: var(--main-padding-principal);
    min-height: var(--main-altura-formulario-form-boton);
    border: none;
    color: var(--main-background-formulario-form-texto-boton);
    background: var(--main-background-formulario-form-boton);
    font-size: 14px;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    display: block;
    text-transform: uppercase;
	}
	
.formulario_index label  {display:none; visibility:hidden;
    width: 100%;
    margin: 1%;
    color: gray;
    font-size: 12px;
    height: 10px;
    display: block;
    float: left;
    line-height: 30px;
    font-weight: 700;}
	
	
.oculto, .escondido_form {visibility:hidden; display:none;}
/* .oculto_movil se activa segun proporciones de Pantalla, ver @media */
.ver_movil {visibility:hidden; display:none;}
 


	
	
	
	
/*------------------glaeria_clientes sin terminar------------------*/
.galeria_productos {
    margin: 19px;
    POSITION: RELATIVE;    
    HEIGHT: 500px !important;
    MIN-HEIGHT: 360PX !important;
    TEXT-ALIGN: LEFT;
    border: 1px solid rgb(220,220,220);
    border-radius: 100px;}
	
.galeria_productos span{
    visibility: visible;
    display: block;
    width: 100%;
    height: 41%;
    /* overflow: auto; */
    text-overflow: ellipsis;
    POSITION: absolute;
    bottom: 0;
    background: white;
    border-radius: 0px 0px 20px 20px;
}
	
.galeria_productos span h3 {
    color: gray;
    font-family: helvetica;
    font-size: 20px;
    text-align: LEFT;
    /* border-bottom: 1px solid ORANGE; */
    /* padding: 10px; */
    padding-bottom: 10px;
    text-transform: uppercase;
    FONT-WEIGHT: 700;
    LEFT: 0PX;}	
	
.galeria_productos span p {
    color: GRAY!important;
    font-family: helvetica;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    TEXT-ALIGN: LEFT;}	
	
.galeria_productos img {
    display: block !important;
    width: 100% !important;
    height: 60%;
    object-fit: cover;
    /* MARGIN: 15%; */
    TOP: 0PX;
    /* LEFT: 20PX; */
    background-position: top center;
    border-radius: 20px 20px 20px 20px;}

	

	
@media only screen and (min-width :0px) and (max-width : 900px){.galeria_productos {margin:10px;} .galeria_clientes span h3 {font-size:15px;} }	
@media only screen and (min-width :900px) and (max-width : 1300px){.galeria_productos {margin:10px;} .galeria_clientes span h3 {font-size:18px;} }	
	
/*----------------------Adaptacion movil para todas las galerias ----------------------*/



	
/*----------------------glaeria_principal texto flotante ----------------------*/	

.galeria_principal {position:relative;/* margin-top: 100px;*/height: 600px !important;}

.galeria_principal span{
    visibility: visible;
    display: block;
    height: auto;
    /* overflow: auto; */
    text-overflow: ellipsis;
    position: absolute;
    top: 0px;
    left: 0px;
    /* background: red; */
    width: 100%;
    height: 100%;
    z-index: 1500;
    margin: 0px !important;
    text-align: left;
    background: rgb(0,0,0,0.6);
	}
	
.galeria_principal span h3 {
    color: white !important;
    /* font-family: baskerville; */
    text-align: center;
    /* border-bottom: 1px solid white; */
    padding: 10px;
    padding-bottom: 10px;
    text-transform: inherit;
    FONT-WEIGHT: 600;
    min-height: 80px;
    margin: auto;
    text-align: center;
    font-size: 45px;
    /* font-style: italic; */
    width: 50%;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;}	
	
.galeria_principal span p {
    color: white !important;
    font-family: baskerville;
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
    margin: 10px;
    /* background: rgb(3,73,145); */
    padding: 10px;}	

.galeria_principal img{width:100% !important; height:100% !important; object-fit:cover !important;}
	
@media only screen and (min-width :0px) and (max-width : 354px)
{	
.galeria_principal {	 display: none;
    float: left;
    min-height: 1px;
    background: rgb(3,73,145); height: 450px; }
}	
@media only screen and (min-width :355px) and (max-width : 605px)
{	
.galeria_principal {	    display: none;
    float: left;
   /* height: 390px;*/
    min-height: 1px;
   /* background: rgb(3,73,145); */}
}	



/* Classes sin terminar*/ 
/* Pop Up Cambio declaracion de variables */ 


#popup {
	width: 100%;    height: 100%;
    position: fixed;
    z-index: 100;	
    background:var(--main-background--popup);    
    overflow: auto;
}	

#pop_imagenes {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 800px;
    height: 50%;
    padding: 50px;
}

#pop_imagenes img {
    max-width: 90%;
    max-height: 90%;
    margin: 5px;
    float: left;
    margin: 5px;
    padding: 5px;
    height: 30px;
}

#popup, #pop_imagenes , #pop_imagenes img {
	transition-property: all;
    transition-duration: 0.5s, 0.5s, 0.5s;
    transition-timing-function: linear, linear;
    transition-delay: 0s ,0.5s, 0.5s;
background: black;}

	
@media only screen and (min-width :0px) and (max-width :900px){	

#pop_imagenes {    width: 80%;    padding: 0px;    min-height: 60%;    /* height: auto; */} 
#pop_imagenes img {    width: 90%;    height: auto;    margin: 5%; } 

}


@media only screen and (min-width :0px) and (max-width : 800px){
	.ancho_fijo, .ancho_fijo_auto { width:100%; }
	.ancho_fijo_auto_pie {    Display:block;}
	#pie_de_pagina div div {
	position:relative;
	width:calc(100% - var(--main-margin-principal));
	min-height: var(--main-logo-pie) !important;
	}
}