/*UTILIDADES*/
/*ACTUALIZACION 17-2-2017*/

*.wAuto {width:auto !important;}
*.w2 {width:1.9% !important;}
*.w3 {width:2.9% !important;}
*.w4 {width:3.9% !important;}
*.w5 {width:4.9% !important;}
*.w6 {width:5.9% !important;}
*.w7 {width:6.9% !important;}
*.w8 {width:7.9% !important;}
*.w10 {width:9.9% !important;}
*.w12 {width:11.9% !important;}
*.w15 {width:14.9% !important;}
*.w20 {width:19.9% !important;}
*.w25 {width:24.9% !important;}
*.w30 {width:29.9% !important;}
*.w33 {width:32.9% !important;}
*.w35 {width:34.9% !important;}
*.w40 {width:39.9% !important;}
*.w45 {width:45.9% !important;}
*.w50 {width:49.9% !important;}
*.w55 {width:54.9% !important;}
*.w60 {width:59.9% !important;}
*.w65 {width:64.9% !important;}
*.w70 {width:69.9% !important;}
*.w75 {width:74.9% !important;}
*.w80 {width:80.0% !important;}
*.w83 {width:82.9% !important;}
*.w85 {width:84.9% !important;}
*.w90 {width:89.9% !important;}
*.w92 {width:91.9% !important;}
*.w95 {width:94.9% !important;}
*.w98 {width:98% !important;}
*.w100 {width:100% !important;}

*.h5{height: 5% !important;}
*.h10{height: 10% !important;}
*.h15{height: 15% !important;}
*.h20{height: 20% !important;}
*.h25{height: 25% !important;}
*.h30{height: 30% !important;}
*.h35{height: 35% !important;}
*.h40{height: 40% !important;}
*.h45{height: 45% !important;}
*.h50{height: 50% !important;}
*.h55{height: 55% !important;}
*.h60{height: 60% !important;}
*.h65{height: 65% !important;}
*.h70{height: 70% !important;}
*.h75{height: 75% !important;}
*.h80{height: 80% !important;}
*.h85{height: 85% !important;}
*.h90{height: 90% !important;}
*.h95{height: 85% !important;}
*.h100{height: 100% !important;}

.noBorder{
	border-style: none !important;
}

.noFondo{
	background-color: transparent !important;
}

.fondoTransparente, .fondotransparente{
	background-color: transparent !important;
}

.margenesCentrados{
	margin-left: auto !important;
	margin-right: auto !important;
}

.FontBold{font-weight: bolder !important;}

.enlaceGrisNaranja{
					color: #455A64 !important;
					text-decoration: none !important;
					cursor: pointer !important;
}
.enlaceGrisNaranja:hover{
					color: #FFA676 !important;
					text-decoration: none !important;
					cursor: pointer !important;
}

.enlaceNaranjaGris{
					color: #FA743E !important; 
					text-decoration: none !important;
					cursor: pointer !important;
}
.enlaceNaranjaGris:hover{
					color: #455A64 !important;
					text-decoration: none !important;
					cursor: pointer !important;
}

/*enlace negro gris, originalmente negro en estado reposo*/
/*ahora es gris en reposo, negro y subrayado en el hover*/
.enlaceNegro{
	color: #333 !important;
	text-decoration: none !important;
}

.enlaceNegro:hover{
	color: #000 !important;
	text-decoration: underline !important;
}

.enlaceBlanco{
	color: #fff !important;
	text-decoration: none !important;
}

.enlaceBlanco:hover{
	color: #fff !important;
	text-decoration: underline !important;
}

.fondoMostaza{
	background-color: #eac463 !important;
}

.fondoNegro{
	background-color: #000 !important;
}

.fondoBlanco{
	background-color: #fff !important;
}

.mostaza{
	color: #eac463 !important;
}

.gris, .gray, .Gris, .Gray{
	color: #ccc !important;
}

.oculto{
	display: none;
}

.textoNegro{
	color: #000 !important;
}

.subrayado{
	text-decoration: underline !important;
}

.enlaceSubrayado:hover{
	text-decoration: underline !important;
}

.noSubrayado{
	text-decoration: none !important;
}

.enlaceNoSubrayado{
	text-decoration: none !important;
}

.enlaceNoSubrayado:hover{
	text-decoration: none !important;
}

.bordeBlanco, .bordeblanco{
	border: solid 1px #FFFFFF  !important;
}

/*Font Sizes**/
.Fs8{font-size:8px !important;} 
.Fs7{font-size:7px !important;}

.Responsive98 {
    width: 98%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.Responsive96 {
    width: 96%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}


.Responsive70 {
    width: 70%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.Responsive60 {
    width: 60%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.Responsive40 {
    width: 40%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.Responsive20 {
    width: 20%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.Responsive66 {
    width: 66%;
    float: left;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.Container45{
	width: 45%;
}

.Container55{
	width: 55%;
}

.Container46{
	width: 46%;
}

.Container47{
	width: 47%;
}

.Container95{
	width: 95%;
}

/*contenedor especifico creado por mi para poder poner a la derecha elementos, el que trae rio no lo hace bien*/

.Container70Fright{ 
	width: 69%;
	float: right !important;
}

.Container60Fright{ 
	width: 59%;
	float: right !important;
}

.Container50Fright{ 
	width: 49%;
	float: right !important;
}

.Container40Fright{ 	
	width: 40%;
	float: right !important;
}

.Container30Fright{ 	
	width: 30%;
	float: right !important;
}

.Container30{padding-top: 0px !important;}

.Container20Fright{ 	
	width: 20%;
	float: right !important;
}

.Container80NoPadding{
	width: 80%;
    box-sizing: border-box;
}

.bordePrueba, .bordeprueba{border: solid 1px red !important;}
.tabla{display: table !important; }
.columna{display: table-column !important;}
.fila{display: table-row !important;}
.celda{display: table-cell !important; vertical-align: top !important; padding-right: 10px; padding-bottom: 10px;}
.celdaNoPadding{display: table-cell !important;}
.inlineFlex{display: inline-flex !important;}
.mays{text-transform: uppercase !important;}

.cursorPointer{cursor: pointer !important;}

@media (min-width: 961px){
	.ShowOnMobile {
	    display: none !important;
	    opacity: 0;
	}
}

.padding10{padding: 10px !important;}

.padding5 {padding: 5px !important;}

.paddingLeft5, .paddinLeft5 {padding-left: 5px !important;}
.paddingRight5, .paddinRight5 {padding-Right: 5px !important;}

.paddingLeft10, .paddinLeft10 {padding-left: 10px !important;}
.paddingRight10, .paddinRight10 {padding-Right: 10px !important;}

.paddingLeft15, .paddinLeft15 {padding-left: 15px !important;}
.paddingRight15, .paddinRight15 {padding-Right: 15px !important;}

.paddingLeft20, .paddinLeft20 {padding-left: 20px !important;}
.paddingRight20, .paddinRight20 {padding-Right: 20px !important;}

.sidePadding5, .sidePaddin5 {padding-left: 5px !important; padding-Right: 5px !important;}
.sidePadding10, .sidePaddin10 {padding-left: 10px !important; padding-Right: 10px !important;}
.sidePadding15, .sidePaddin15 {padding-left: 15px !important; padding-Right: 15px !important;}
.sidePadding20, .sidePaddin20 {padding-left: 20px !important; padding-Right: 20px !important;}

.padding0, .noPadding, .NoPadding, .noPadding, .noPaddin{
	padding: 0px !important;
}

/* Margins */
.MarTopPerc5{margin-top:5%;}
.MarTopPerc10{ margin-top:10%;}
.MarTopPerc20{ margin-top:20%;}
.MarTopPerc30{ margin-top:30%;}
.MarTopPerc40{ margin-top:40%;}
.MarTopPerc50{ margin-top:50%;}

.MarAuto{ margin-left:auto; margin-right:auto;}

.MarTop5{ margin-top:5px;}
.MarTop10{ margin-top:10px;}
.MarTop20{ margin-top:20px;}
.MarTop30{ margin-top:30px;}
.MarTop40{ margin-top:40px;}
.MarTop50{ margin-top:50px;}

.MarTopQuarter{ margin-top:25%;}
.MarTopHalf{ margin-top:50%;}

.MarBot5{ margin-bottom:5px;}
.MarBot10{ margin-bottom:10px;}
.MarBot20{ margin-bottom:20px;}
.MarBot30{ margin-bottom:30px;}
.MarRight5{ margin-right:5px;}
.MarRight10{ margin-right:10px;}
.MarRight15{ margin-right:15px;}
.MarRight20{ margin-right:20px;}
.MarRight30{ margin-right:30px;}
.MarLeft5{ margin-left:5px;}
.MarLeft10{ margin-left:10px;}
.MarLeft15{ margin-left:15px;}
.MarLeft20{ margin-left:20px;}
.MarLeft30{ margin-left:30px;}

/*SHOW ONLY IN CHROME*/
/*para que esto funcione hace falta la libreria css browser selector*/
.chrome .showInChrome{display: block !important;}
.gecko 	.showInChrome{display: none !important;}
.ie 	.showInChrome{display: none !important;}

/*SHOW ONLY IN FIREFOX*/

.gecko 	.showInFirefox{display: block !important;}
.chrome .showInFirefox{display: none !important;}
.ie 	.showInFirefox{display: none !important;}

/*SHOW ONLY IN iexplorer*/

.ie 	.showInExplorer{display: block !important;}
.gecko 	.showInExplorer{display: none !important;}
.chrome .showInExplorer{display: none !important;}

/*soluciones para movil

@media all and (max-width: 480px){
	.ui-paginator .ui-paginator-current{
		font-size: 12px !important;
	}
}

 botones con icono pequeños en movil y tablets
 
 @media all and (max-width: 1024px) and (min-width:801px){
	 .ui-button-icon-only {
	    min-width: 30px !important;
	    max-width: 30px !important;
	    border-radius: 30px !important;
	    -webkit-border-radius: 30px !important;
	    -moz-border-radius: 30px !important;
	    min-height: 30px !important;
	    max-height: 30px !important;
	}
}

@media (max-width: 800px){
	.ui-button-icon-only {
	    min-width: 25px !important;
	    max-width: 25px !important;
	    border-radius: 30px !important;
	    -webkit-border-radius: 30px !important;
	    -moz-border-radius: 30px !important;
	    min-height: 25px !important;
	    max-height: 25px !important;
	}
	
	.ui-paginator .ui-paginator-current {
	    font-size: 10px;
	    padding: 10px;
	    color: #fff;
	    font-family: 'roboto_condensedlight';
	}
}*/


/* Text Aligns */

.TexAlLeft,
.texAlLeft,
.left,
.Left,
.izquierda {
	text-align:left !important;
}

.justificado,
.justify 
{
	text-align: justify !important;
}

.TexAlCenter,
.texAlCenter,
.centrado,
.Centrado,
.center,
.Center
{
   text-align:center !important;
}

.TexAlRight,
.texAlRight,
.derecha,
.derecho,
.right {
   text-align:right !important;
}



/*posicionamiento relativo*/

.relative,
.relativo,
.Relative,
.Relativo{
	position: relative !important;
}

.right5{right: 5px !important;}
.right10{right: 10px !important;}
.right15{right: 15px !important;}
.right20{right: 20px !important;}
.right25{right: 25px !important;}
.right30{right: 30px !important;}

.left5{left: 5px !important;}
.left10{left: 10px !important;}
.left15{left: 15px !important;}
.left20{left: 20px !important;}
.left25{left: 25px !important;}
.left30{left: 30px !important;}

.top5{top: 5px !important;}
.top10{top: 10px !important;}
.top15{top: 15px !important;}
.top20{top: 20px !important;}
.top25{top: 25px !important;}
.top30{top: 30px !important;}

.bottom5{bottom: 5px !important;}
.bottom10{bottom: 10px !important;}
.bottom15{bottom: 15px !important;}
.bottom20{bottom: 20px !important;}
.bottom25{bottom: 25px !important;}
.bottom30{bottom: 30px !important;}