@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1600px){
	/*Marca*/
	#marca{ background:#ffcc00; }	
	
	/*Overlay y Popup*/	
	.popup { width:60%; }
}

@media screen and (max-width: 1280px){
	/*Marca*/
	#marca{ background:#000; }	
	
	/*Header*/
	#header{ background-image:url(../../img/hd2.jpg); }
	
	/*Areas Especiales*/	
	.wrap-nom_files{ font-size:0.65rem; }
	
	/*Graficas*/
	.wrap-graficas{ display:none; }
	.wrap-graficas-movil{ display:block; }
}

/*Cambio a una columna*/
@media screen and (max-width: 1023px){
	/*Marca*/
	#marca{ background:#3366cc; }
	
	/*Header*/
	#header{ background-image:url(../../img/hd3.jpg); height:5.2rem; }
	.head__logo-img{ height:auto; max-width:62px; width:100%; }
	.head__data-wrap-titulo{ height:2rem; width:44%; }
	.head__data-titulo{ font-size:1rem; padding-top:0.5rem; top:-0.3rem; }
	
	/*Menu de Navegacion*/
	#hd_0_3_1{ left:0; -ms-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; padding:0; position:absolute; text-align:right; width:100%; }
	#hd_0_3_1 label{ display:block; color:#FFF; font-size:2rem; height:auto; margin-right:1.5rem; margin-bottom:0.5rem; padding:0; }		
	.menu{ left:0; padding:0; position:absolute; top:40px; width:100%; -ms-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transform:translateX(-100%); transition: all 0.3s ease-in; }		
	.menu ul{ background:#57D2FF; display:block; position:relative; }		
	.menu ul ul{ background:#FFF; display:none; }	
	.menu ul li{ border-bottom: 1px solid #B2EAFF; padding:0.6rem 0.2rem; text-align:center; }
	.menu ul li ul li:hover{ background:#D8F4FF; }
	.menu ul li ul { padding:0; }
	.menu ul li ul li{ border-top: 1px solid #B2EAFF; padding:0; }
	.menu ul li a{ color:#FFF; font-size:1rem; font-weight:normal; }
	.menu ul li a:hover{ color:#F45855; }
	.menu ul ul li a{ font-weight:normal; }	
	.menu ul li:hover ul{ display:none; position:static; }
	.menu a{ font-size:0.92rem; }
	.menu a i{ display:inline-block; padding:0 0.5em; position:absolute; right:0; }
	#btn-menu:checked ~.menu{ transform:translateX(0%); }
	.menu ul ul a{ color:#674595; padding: 0.6em 2.5em; }
	
	/*Overlay y Popup*/	
	.popup { width:70%; }
	
	/*Areas de Trabajo*/
	.wrap-principal{ margin-top:5.2rem; }
	.wrap-principal__fondo{ background-image:url(../../img/background-v.jpg); }
	.wrap-form__h{ flex-direction:column; justify-content:center; }
	.wrap-form__hcenter{ flex-direction:column; justify-content:center; text-align:center; }
	.wrap-form__h--details-column{ width:46%; }
	
	.wrap-form__50{ width:100%; }
	.wrap-form__30{ width:100%; }
	
	/*Areas especiales*/
	.wrap-radicado{ flex-direction:column; justify-content:center; align-items:center; padding:2rem 0; }
	.wrap-radicado__numero{ font-size:1.6rem; margin-bottom:2rem; text-align:center; width:100%; }
	.wrap-radicado__botones{ flex-direction:column; width:100%; }
	.wrap-add{ margin-left:0; margin-top:0.3rem; }
}

@media screen and (max-width: 767px){
	/*Marca*/
	#marca{ background:#cc0000; }	
	
	/*Formulario*/	
	.textbox--anchofijo{ width:100%; }
	.wrap_textbox{ margin:0.2rem 0; width:100%; }
	
	/*Overlay y Popup*/	
	.popup { width:90%; }
	
	/*Tablas Responsive*/	
	.tableR .trR{ border:1px solid #B3B5B7; display:flex; flex-direction:column; margin-bottom:1rem; padding:0.5rem; }
	.tableR .theadR{ display:none; }
	.tableR .tdR[data-title]{ display:flex; flex-direction:column; }
	.tableR .tdR[data-title]::before{ content: attr(data-title); color:#000; font-weight:bold; font-size:0.9rem; width:100%; }
	.tdR, .thR{ border:none; }
	.td--position-hori{ text-align:left; }
	
	/*Areas de Trabajo*/
	.wrap-form__h--filters{ flex-direction:column; justify-content:flex-start; align-items:flex-start; flex-wrap:nowrap; width:100%; }	
	
	.wrap-nom_files{ font-size:0.55rem; }
}

@media screen and (max-width: 649px){
	/*Marca*/
	#marca{ background:#00dd00; }	
	
	/*Header*/
	#header{ background-image:url(../../img/hd4.jpg); }
	.head__logo{ width:30%; }	
	.head__data{ width:70%; }
	.head__data-wrap-titulo{ height:2rem; margin-right:0.8rem; width:56%; }
	.head__data-titulo{ font-size:1rem; padding-top:0.5rem; top:-0.3rem; }
	.head__data-menu{ margin-right:0.8rem; }
	
	/*Overlay y Popup*/	
	.popup { width:90%; }
	.popup_cerrar{ right:-10px; } 
	
	/*Iconos Flotantes*/
	.floaticons__whatsapp{ background-size:48px 48px; bottom:1rem; left:1rem; height:48px; width:48px; }
	.floaticons__whatsapp-pulse1 { bottom:0.75rem; left:0.75rem; height:58px; width:58px; }
	.floaticons__whatsapp-pulse2 { bottom:0.75rem; left:0.75rem; height:58px; width:58px; }
	
	/*Tablas Responsive*/	
	.tableR { border-collapse:collapse; min-width:90%; width:100%; }
	
	/*Areas de Trabajo*/
	.wrap-principal{ padding:3rem 3rem; }
	.wrap-form__h--details-column{ width:100%; }
	
	/*Areas Especiales*/
	.wrap-nom_files{ font-size:0.8rem; }
}

@media screen and (max-width: 479px){
	/*Marca*/
	#marca{ background:#FF00AA; }	
	
	/*Header*/
	#header{ background-image:url(../../img/hd5.jpg); }
	.head__logo{ width:40%; }
	.head__data{ width:60%; }
	.head__data-titulo{ display:none; }
	
	/*Overlay y Popup*/	
	.popup { width:90%; }
	.popup_cerrar{ right:-15px; }
	
	/*Tablas Responsive*/
	.tdR, .thR{ font-size:0.8rem; padding:0.2rem; }
	
	/*Areas de Trabajo*/
	.wrap-principal{ padding:3rem 1rem; }
	
	/*Areas Especiales*/
	.wrap-radicado__numero{ font-size:1.5rem; }
	.wrap-nom_files{ font-size:0.7rem; }
}

@media screen and (max-width: 370px){
	/*Marca*/
	#marca{ background:#000; }	
	
	/*Overlay y Popup*/	
	.popup_cerrar{ right:-10px; }
	
	/*Tablas Responsive*/
	.tdR, .thR{ font-size:0.8rem; padding:0.2rem; }
	.tableR .tdR[data-title]::before{ font-size:0.8rem; }
	
	/*Areas Especiales*/
	.wrap-radicado__numero{ font-size:1.2rem; }
	.wrap-nom_files{ font-size:0.55rem; }
}

@media screen and (max-width: 269px){
	/*Marca*/
	#marca{ background:#ffcc00; }	
	
}

