/*******************************************************************************************************************************************************
 *
 *								 MESSENGER
 *
 *******************************************************************************************************************************************************/

.modal{
	background: rgba(0,0,0,0.8);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}

.modal-content{
	background: #FFF;
	-webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,0.3);
	box-shadow: 0 0 20px 5px rgba(0,0,0,0.3);
	padding: 30px;
	border-radius: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	max-height: 450px;
	overflow: scroll;
}

.modal-content h2{
	margin-top: 0;
}

#msj-nuevo{
	border-radius: 5px 5px 0 0;
	border: 1px solid #DDD;
	padding: 15px;
}

.buscar-conversacion{
	background: #FFF;
	padding: 15px;
}

.msjs-recibidos ul{
	margin-top: 0;
}

.msj-activo{
	background: #00b046;
}

.messenger .panel-content{
	padding: 0;
}

.msjs-recibidos{
	background: #303741;
}

.msjs-recibidos li{
	position: relative;
	margin: 0;
	padding: 20px;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.msjs-recibidos i.icon-user-male{
	background: #FFF;
	width: 50px;
	text-align: center;
	padding: 12px 0 0 0;
	font-size: 25px;
	display: none;
	height: 38px;
	border-radius: 50%;
	margin: 0 0 10px 0;
}

.msjs-recibidos i.ocultar-conversacion{
	color: rgba(255,255,255,0.2);
	font-size: 25px;
	position: absolute;
	bottom: 15px;
	right: 15px;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.msjs-recibidos li:hover i.ocultar-conversacion{
	color: rgba(255,255,255,1);
}

.msjs-recibidos li:nth-child(1){
	border: none;
}

.msjs-recibidos li:hover{
	background: #000;
}

.msjs-recibidos h3{
	width: 75%;
	margin: 0;
	color: #FFF;
	font-weight: normal;
}

.msj-activo h3{
	font-weight: bolder;
}

.msjs-recibidos p.msj-vista-previa{
	width: 80%;
	color: rgba(255, 255, 255, 0.3);
	margin: 10px 0 0 0;
}

.msj-fecha{
	text-align: right;
	position: absolute;
	top: 0;
	right: 15px;
	display: inline-block;
	padding: 5px 10px;
	background: #FFF;
	font-size: 11px;
	border-radius: 15px;
}

.listado-mensajes li:nth-child(even) .mensaje > p{
	background: #96b3cd;
}

/*******************************************************************************************************************************************************
 *
 *								 RADIO BUTTONS
 *
 *******************************************************************************************************************************************************/

.rdio{
	margin: 10px 0 0 0;
}

.rdio label{
	position: relative;
}

.rdio input[type="radio"]{
	visibility: hidden;
	display: none;
}

.rdio input[type="radio"] + label{
	padding: 0 0 0 40px;
	margin: 0 0 3px 0;
	display: inline-block;
}

.rdio input[type="radio"] + label span{
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: -5px;
	border-radius: 50%;
	background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
	background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}

.rdio input[type="radio"]:checked + label span{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#008404+1,54af54+99 */
	background: rgb(0,132,4); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(0,132,4,1) 1%, rgba(84,175,84,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,132,4,1) 1%,rgba(84,175,84,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,132,4,1) 1%,rgba(84,175,84,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008404', endColorstr='#54af54',GradientType=0 ); /* IE6-9 */
}

.rdio input[type="radio"]:checked + label span:after{
	content: '\e84d';
  	font-family: 'fontello';
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	font-size: 25px;
	text-align: center;
	line-height: 30px;
	top: 0;
	left: 0;
	color: #FFF;
}

/*******************************************************************************************************************************************************
 *
 *								TERMINA RADIO BUTTONS
 *
 *******************************************************************************************************************************************************/


/*******************************************************************************************************************************************************
 *
 *								SECCION BANCO DE PREGUNTAS
 *
 *******************************************************************************************************************************************************/


.radiorespuesta{
	padding: 0 0 10px 40px !important;
}
 

.chosen-container{
	width: 100% !important;
	margin: 5px 0 10px 0;
}

.exmrespuesta{
 border-left: 0 solid !important;
    border-right: 0 solid !important;
    border-top: 0 solid !important;
    display: inline-block !important;
    width: 85% !important;
}


.respuesta label{
	max-width: 80%;
}

.respuesta .eliminar{
	float: right;
	margin-top: 5px;	
}

.respuesta{
	border-bottom: 1px dotted #DDD;
	/*padding: 10px;*/
	margin: 0 0 12px 0 !important;
	width: 100% !important;
}

.guardar-pregunta{
	background: #DDD;
	margin: 0 0 20px 0;
	padding: 10px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

p.hint{
	float: right;
	margin: 0;
	font-size: 10px;
	background: #1db954;
	display: inline-block;
	padding: 1px 10px;
	border-radius: 5px;
	color: #FFF !important;
}

.respuestas{
	padding: 20px;
	border: 10px solid #DDD;
	border-bottom: none;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.respuestas li{
	margin: 0 0 0px 0;
}

.respuestas li:first-child .rdio{
	margin: 0;
}

.banco-preguntas h2{
	margin: 0;
}

.num-pregunta{
	font-family: 'nexa_lightregular', 'Montserrat', sans-serif;
}

#respuestas{
	padding: 20px;
	border-radius: 5px;
	border: 2px solid #DDD;
}

.banco-preguntas p{
	color: #303741;
}

.banco-preguntas h1{
	font-family: 'nexa_boldregular', 'Montserrat', sans-serif;
	font-weight: bold;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	border-bottom: 3px solid #DDD;
	position: relative;
}

.banco-preguntas h4{
	display: inline-block;
	margin: 0;
	padding: 5px 0;

	position: relative;
}

.banco-preguntas h4:after{
	content: "";
	display: block;
	background: #303741;
	width: 100%;
	height: 5px;
}

.banco-preguntas h4 i{
	position: absolute;
	top: -5px;
	left: -40px;
	color: #303741;
	padding: 10px 0 0 0;
	font-size: 22px;
}

.banco-preguntas h4:after{
	content: "";
	display: block;
	background: #303741;
	width: 100%;
	height: 5px;
}

.panel-content{
	border-radius: 5px;
}

.indicador{
	font-size: 11px;
}

/*******************************************************************************************************************************************************
 *
 *								TERMINA BANCO DE PREGUNTAS
 *
 *******************************************************************************************************************************************************/



 
 
 
 
 
/*input, button, select {
  -webkit-appearance: searchfield;
}*/

.menu-secundario-plus{
	position: relative;
	margin: 0 0 40px 0;
	background: #303741;
	-webkit-box-shadow: 0 0 20px 3px rgba(0,0,0,0.3);
	box-shadow: 0 0 20px 3px rgba(0,0,0,0.3);
}

.menu-secundario-plus i{
	display: block;
	font-size: 22px;
	margin: 0 0 10px 0;
}

.menu-secundario-plus li.actual a,
.menu-secundario li.actual a{
	background: #3E8ACC;
}

.menu-secundario-plus li.mas-opciones > a{
	background: #151f2d;
}

.menu-secundario-plus li{
	position: relative;
}

.menu-secundario-plus .op-menu{
	position: absolute;
	background: #fff;
	z-index: 1;
	right: 0;
	width: 200px;
	-webkit-box-shadow: 0 0 20px 3px rgba(0,0,0,0.3);
	box-shadow: 0 0 20px 3px rgba(0,0,0,0.3);
}

.menu-secundario-plus li,
.menu-secundario-plus ul,
.menu-secundario-plus .op-menu li{
	margin: 0;
	padding: 0;
}

.menu-secundario-plus .op-menu li a{
	display: block;
	padding: 15px 20px;
	font-size: 13px;
}

.menu-secundario-plus .op-menu li a:hover{
	padding: 15px 15px 15px 30px;
}

.menu-secundario-plus > li > a{
	padding: 10px;
	vertical-align: middle;
	font-size: 13px;
	line-height: 15px;
	background: #303741;
	color: #FFF;
	text-align: center;
}

.menu-secundario a{
	display: block;
	text-transform: uppercase;
	font-size: 15px;
	background: #3E8ACC;
	color: #FFF;
	text-align: center;
	line-height: 20px;
	border-radius: 5px;
	padding: 5px 10px;
}

.menu-secundario-plus > li > a:hover,
.menu-secundario > li > a:hover{
	background: #000;
}

.menu-secundario-plus a:active,
.menu-secundario a:active{
	background: #ddd;
}

.btn-ayuda{
	bottom: -60px;
	right: 30px;
	position: absolute;
	display: block;
	float: right;
	color: #888;
	background: #FFF;
	line-height: 20px;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 0 0 5px 5px;
	border: 2px solid #888;
}

.btn-ayuda:hover{
	background: #888;
	color: #fff;
}

/*******************************************************************************************************************************************************
 *
 *								SECCION VER OBRA
 *
 *******************************************************************************************************************************************************/

.boton{
	display: inline-block;
	background: #e5e5e5;
	border: 1px solid #ccc;
	padding: 4px 15px 4px 15px;
	color: #666;
	font-size: small;
	cursor: pointer;
	border-radius:4px;	
}

.boton.verde{
	background: #1db954;
	border-color: #1db954;
}
.boton:hover{
	background: #4682B4;
	color: #fff;
}

.ver-informacion p{
	color: #303741;
}

.ver-informacion h1{
	font-family: 'nexa_boldregular', 'Montserrat', sans-serif;
	font-weight: bold;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	border-bottom: 3px solid #DDD;
	position: relative;
}

.ver-informacion h1 i{
	position: absolute;
	top: 0;
	left: 0;
}

.ver-informacion h4{
	display: inline-block;
	margin: 0;
	padding: 5px 0;
	position: relative;
}

.ver-informacion h4:after{
	content: "";
	display: block;
	background: #303741;
	width: 100%;
	height: 5px;
}

.ver-informacion h4 i{
	position: absolute;
	top: -5px;
	left: -40px;
	color: #303741;
	padding: 10px 0 0 0;
	font-size: 22px;
}

.panel-content{
	border-radius: 5px;
}

.indicador{
	font-size: 11px;
}

/*******************************************************************************************************************************************************
 *
 *								TERMINA SECCION VER OBRA
 *
 *******************************************************************************************************************************************************/

/*******************************************************************************************************************************************************
 *
 *								CHECKBOXES
 *
 *******************************************************************************************************************************************************/




.chk{
	margin: 0 0 10px 0;
}

.chk label{
	position: relative;
}

.chk input[type="checkbox"]{
	visibility: hidden;
	display: none;
}

.chk input[type="checkbox"] + label{
	padding: 0 0 0 40px;
	margin: 0 0 3px 0;
	display: inline-block;
}

.chk input[type="checkbox"] + label span{
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: -5px;
	border-radius: 50%;
	background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
	background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}

.chk input[type="checkbox"]:checked + label span:after{
	content: '\e84d';
  	font-family: 'fontello';
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	font-size: 25px;
	text-align: center;
	line-height: 30px;
	top: 0;
	left: 0;
	color: #FFF;
}

/*******************************************************************************************************************************************************
 *
 *								TERMINA CHECKBOXES
 *
 *******************************************************************************************************************************************************/



* {
	-webkit-font-smoothing: antialiased;
}

input[type="text"], input[type="password"], textarea, button, select{
	-webkit-appearance: none;
}

a, input, textarea, select, li, div, #nav-principal, .menu-secundario-plus a{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a, input[type="text"], input[type="password"], button, textarea, #navegacion, .notificacion{
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#msj-titulo{
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
	border-bottom: 2px solid #DDD;
}

#msj-titulo h2{
	float: left;
	margin: 0;
}

#msj-titulo > a{
	float: right;
	margin: 0;
	padding: 0;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.wrap{
	margin: 0 auto;
	padding: 60px 0;
}

.txt-ct{
	text-align: center;
}

.txt-rg{
	text-align: right;
}

a{
	text-decoration: none;
}

h2{
	font-weight: 700;
	margin: 20px 0;
}

h3{
	margin: 10px 0;
}

h4{
	margin: 5px 0;
}

h1, h2, h3, h4, h5, h6{
	text-transform: uppercase;
}

h1{
	letter-spacing: -1px;
	text-align: center;
	font-size: 25px;
	line-height: 25px;
	font-family: 'nexa_lightregular', 'Montserrat', sans-serif;
}

h1 span{
	font-family: 'nexa_boldregular', 'Montserrat', sans-serif;
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6, 
p, li, td, input, textarea, select, button, a, th,div {
	font-family: 'Montserrat', sans-serif;
	color: #303741;
}

p, ul{
	margin: 10px 0;
}

b{
	font-weight: bold;
}

p, li, td, th, input, textarea, select{
	font-size: 15px;
	line-height: 19px;
	font-weight: 400;
}

table{
	margin: 20px 0;
}

th, td{
	padding: 10px;
}

tbody tr:nth-child(odd){
	background: #DDD;
}

table{
	width: 100%;
}

thead{
	background: #888;
}

th{
	color: #FFF;
	text-transform: uppercase;
	text-align: left;
}

label{
	text-transform: uppercase;
}

.accion label{
	color: #FFF;
}

input[type="text"], input[type="password"], textarea, select{
	width: 100%;
	display: block;
	outline: none;
	border: 2px solid #DDD;
	padding: 5px;
	margin: 5px 0 10px 0;
	color: #888;
}

input:focus, textarea:focus, select:focus{
	border-color: transparent;
	color: #000;
	-webkit-box-shadow: 0 0 15px 1px rgba(0,0,0,0.3);
	box-shadow: 0 0 15px 1px rgba(0,0,0,0.3);
}

.accion input:focus, .accion textarea:focus, .accion select:focus{
	background: #000;
	color: #fff;
	border-color: transparent;
	-webkit-box-shadow: 0 0 15px 4px #3E8ACC;
	box-shadow: 0 0 15px 4px #3E8ACC;
}

textarea{
	min-height: 80px;
}

select{
	background: #FFF url('../img/select.png') no-repeat center right;
	background: #FFF url('../img/select.svg') no-repeat center right;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="button"],
input#boton-login,
input[type="submit"]{
	cursor: pointer;
	border-color: #3E8ACC;
	text-transform: uppercase;
	color: #FFF;
	background: #3E8ACC;
}

input[type="button"]:hover,
input#boton-login:hover,
input[type="submit"]:hover{
	background: #000;
	border-color: #000;
}

input.reset,
input[type="reset"]{
	text-transform: uppercase;
	background: #666;
	color: #999;
	border-color: #666;
}

input.reset:hover,
input[type="reset"]:hover{
	background: #000;
	border-color: #000;
}

i.eliminar{
	display: inline-block;
}

input[type="text"], input[type="password"], textarea{
	border-radius: 5px;
}

.notificacion.animado.activo{
	-moz-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}

.notificacion.animado{
	-moz-transform: translateY(-200px);
	-webkit-transform: translateY(-200px);
	-o-transform: translateY(-200px);
	-ms-transform: translateY(-200px);
	transform: translateY(-200px);
}

.icono-notificacion{
	width: 40px;
	z-index: 5;
	height: 40px;
	border-radius: 50%;
	display: block;
	position: absolute;
	bottom: -10px;
	right: 50%;
	margin: 0 -20px -20px 0;
	text-align: center;
	text-indent: -9999px;
	background: #FFF;
	border: 5px solid;
}

.notificacion{
	z-index: 1;
	position: fixed;
	width: 100%;
	top: 50px;
	left: 0;
	text-align: center;
	padding: 15px 20px;
}

.notificacion p, .notificacion a{
	text-transform: uppercase;
	color: #FFF;
	font-size: 13px;
}

.notificacion a.paso-siguiente{
	display: inline-block;
	padding: 0 10px;
}

.error{
	background: #CF5555;
}

.error a{
	background: #fff;
	color: #CF5555;
}

.error .icono-notificacion{
	border-color: #CF5555;
}

.error .icono-notificacion{
	background: #FFF url('../img/error.png') no-repeat center center;
	background: #FFF url('../img/error.svg') no-repeat center center;
	background-size: contain;
}

.confirmacion{
	background: #92CF55;
}

.confirmacion a{
	color: #92CF55;
	background: #FFF;
}

.confirmacion .icono-notificacion{
	border-color: #92CF55;
}

.confirmacion .icono-notificacion{
	background: #FFF url('../img/confirmacion.png') no-repeat center center;
	background: #FFF url('../img/confirmacion.svg') no-repeat center center;
	background-size: contain;
}

.aviso{
	background: #559ECF;
}

.aviso a{
	color: #559ECF;
	background: #fff;
}

.aviso .icono-notificacion{
	border-color: #559ECF;
}

.aviso .icono-notificacion{
	background: #FFF url('../img/aviso.png') no-repeat center center;
	background: #FFF url('../img/aviso.svg') no-repeat center center;
	background-size: contain;
}

.alerta{
	background: #E09B1B;
}

.alerta a{
	color: #E09B1B;
	background: #FFF;
}

.alerta .icono-notificacion{
	background: #FFF url('../img/alerta.png') no-repeat center center;
	background: #FFF url('../img/alerta.svg') no-repeat center center;
	background-size: contain;
}

.alerta .icono-notificacion{
	border-color: #E09B1B;
}

#header{
	top: 0;
	z-index: 10;
	position: fixed;
	width: 100%;
	height: 50px;
}


#logos{
	width: 186px;
	height: 40px;
	background: url('../img/logo-relal-sie.png') no-repeat center center;
	background: url('../img/logo-relal-sie.svg') no-repeat center center;
	background-size: contain;
	text-indent: -9999px;
	display: block;
	color: #FFF;
	margin: 0 auto;
	position: relative;
	top: 6px;
	text-align: center;
}

#logom{
	width: 367px;
	height: 40px;
	background: url('../img/logo-mexico-sie.png') no-repeat center center;
	background: url('../img/logo-mexico-sie.svg') no-repeat center center;
	background-size: contain;
	text-indent: -9999px;
	display: block;
	color: #FFF;
	margin: 0 auto;
	position: relative;
	top: 6px;
	text-align: center;
}

#logo_isie{
	width: 150px;
	height: 150px;
	background: url('../img/logo-isie.png') no-repeat center center;
/*	background: url('../img/logo-isie.svg') no-repeat center center;*/
	background-size: contain;
	text-indent: -9999px;
	display: block;
	color: #FFF;
	margin: 0 auto;
	position: relative;
	top: 6px;
	text-align: center;
}

#logo-isie-header{
	width: 66px;
	height: 40px;
	background: url('../img/logo-isie-header.png') no-repeat center center;
/*	background: url('../img/logo-isie.svg') no-repeat center center;*/
	background-size: contain;
	text-indent: -9999px;
	display: block;
	color: #FFF;
	margin: 0 auto;
	position: relative;
	top: 6px;
	text-align: center;
}

.opciones{
	border-bottom: 1px dotted #303741;
}

.opciones li, .opciones ul, .opciones h2{
	margin: 0;
}

.pills li{
	display: inline-block;
}

.pills a{
	border: 3px solid #303741;
	line-height: 40px;
	border-radius: 25px;
	padding: 0 15px;
	display: block;
	text-transform: uppercase;
}

.pills a:hover{
	background: #303741;
	color: #FFF;
}

#nav-principal li{
	margin: 0;
}

#funciones-rapidas a,
#nav-principal a{
	text-transform: uppercase;
	display: block;
}

#nav-principal > li > a{
	color: #FFF;
	text-align: center;
	font-size: 18px;
	padding: 10px;
}

#nav-principal i{
	position: relative;
	top: 15px;
	display: inline-block;
}

#funciones-rapidas > li{
	float: left;
}

#funciones-rapidas > li > a{
	line-height: 50px;
	color: #fff;
	padding: 0 15px;
}

.sub h2{
	margin-top: 0;
}

.sub.activo{
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}

.sub{
	position:absolute;
	right: 0;
    top: 33px;
    z-index: 100;

    -moz-transform: translateX(500px);
	-webkit-transform: translateX(500px);
	-o-transform: translateX(500px);
	-ms-transform: translateX(500px);
	transform: translateX(500px);
    
    -webkit-transition:200ms ease;
    -moz-transition:200ms ease;
    -o-transition:200ms ease;
    transition:200ms ease;

	background: #FFF;
	padding: 20px;
}

.sub ul{
	margin: 0;
}

.sub a{
	padding: 5px 0;
}

#msjs{
	background: #00A99D;
}

#msjs span{
	color: #00A99D;
	background: #FFF;
	padding: 2px 4px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#mensajes h2{
	color: #00A99D;
}

#header, .accion{
	background: #151f2d;
}

#titulo{
	position: relative;
	padding: 20px 0;
	background: #303741;
}

#titulo h1{
	color: #FFF;
}

#nav-principal,
#funciones-rapidas{
	margin: 0;
}

#nav-principal > li:nth-child(1){
	background: #FBB03B;
}

#nav-principal > li:nth-child(1) h2{
	color: #FBB03B;
}

#nav-principal > li:nth-child(2){
	background: #DB9435;
}

#nav-principal > li:nth-child(2) h2{
	color: #DB9435;
}

#nav-principal > li:nth-child(3){
	background: #BC7C2F;
}

#nav-principal > li:nth-child(3) h2{
	color: #BC7C2F;
}

#nav-principal > li:nth-child(4){
	background: #9B6429;
}

#nav-principal > li:nth-child(4) h2{
	color: #9B6429;
}

#nav-principal > li:nth-child(5){
	background: #7A4B21;
}

#nav-principal > li:nth-child(5) h2{
	color: #7A4B21;
}

#lista-msjs .ms{
	float: left;
	width: 85%;
}

#usuario{
	position: relative;
}

#usuario img{
	position: relative;
	top: 12px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

#usuario > a{
	height: 50px;
}

#usuario span{
	margin: 0 0 0 10px;
}

#lista-msjs img{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	float: left;
	margin: 0 10px 0 0;
}

#lista-msjs p{
	margin: 0;
}

#lista-msjs .msj{
	text-transform: none;
	color: #888;
	font-size: 10px;
	line-height: 14px;
}

body{
	padding: 50px 0 0 0;
}

#toggle-menu{
	background: #303741;
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	position: fixed;
	top: 9px;
	left: 20px;
	text-align: center;
	width: 100px;
	z-index: 11;
	color: #FFF;
	padding: 10px 15px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#toggle-menu:hover{
	background: #888;
}

#nav ul{
	margin: 0;
}

#nav a,
#nav h2{
	color: #FFF;
	font-size: 12px;
	margin: 0;
}

#nav{
	background: #000;
}

#nav a{
	display: block;
	text-transform: uppercase;
}

#nav > .bloc{
	line-height: 50px;
	margin: 0;
	padding: 0 20px;
}

#nav ul{
	margin: 20px;
}

#nav ul a{
	margin: 10px 0;
}

#nav > .bloc:nth-child(1){
	background: #023B5B;
}

#nav > .bloc:nth-child(3){
	background: #044F80;
}

#nav > .bloc:nth-child(5){
	background: #045EA6;
}

#nav > .bloc:nth-child(7){
	background: #0074BC;
}

#nav > .bloc:nth-child(9){
	background: #02B1DE;
}

li.final-accion input{
	max-width: 200px;
	display: inline-block;
}

li.final-accion input.reset,
li.final-accion input[type="reset"]{
	float: left;
}

li.final-accion input.submit,
li.final-accion input[type="submit"]{
	float: right;
}

.head{
	padding-bottom: 0;
}

.accion{
	margin: -15px -15px 15px -15px;
	padding: 15px;
}

.accion{
	display: none;
}

#navegacion.activo{
	opacity: 1;

	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}

.seccion-actual a{
	text-decoration: underline;
	font-weight: 700;
	background: url('../img/actual.png') no-repeat center left;
	background-size: 15px;
}

#navegacion{
	opacity: 0;
	top: 50px;
	z-index: 10;
	left: 20px;
	position: fixed;
	padding: 20px;
	background: #FFF;
	-webkit-box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);
	box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);

	-moz-transform: translateX(-500px);
	-webkit-transform: translateX(-500px);
	-o-transform: translateX(-500px);
	-ms-transform: translateX(-500px);
	transform: translateX(-500px);
}

#navegacion:before{
	bottom: 100%;
	left: 52px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 5px;
	margin-left: -5px;
}

#funciones-rapidas h2,
#funciones-rapidas h3,
#funciones-rapidas a{
	font-size: 13px;
	line-height: 16px;
}

#navegacion a:hover{
	-moz-transform: translateX(15px);
	-webkit-transform: translateX(15px);
	-o-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
}

#navegacion a{
	display: block;
	font-size: 13px;
	line-height: 16px;
	padding: 2px 15px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#navegacion h3{
	margin: 0;
	font-size: 13px;
	color: #FFF;
	padding: 5px 15px;
}

#navegacion ul{
	margin: 0 0 10px 0;
}
/*
#navegacion h3:nth-of-type(1),
#navegacion h3:nth-of-type(6){
	background: #1670b7;
}

#navegacion h3:nth-of-type(2),
#navegacion h3:nth-of-type(7){
	background: #1670b7;
}

#navegacion h3:nth-of-type(3),
#navegacion h3:nth-of-type(8){
	background: #1670b7;
}

#navegacion h3:nth-of-type(4),
#navegacion h3:nth-of-type(9){
	background: #1670b7;
}

#navegacion h3:nth-of-type(5),
#navegacion h3:nth-of-type(10){
	background: #1670b7;
}*/

.panel{
	margin: 0 0 40px 0;
}

.panel-content{
	padding: 15px;
	border: 1px solid #DDD;
}

.panel-head h2{
	color: #303741;
}

.acciones{
	display: inline-block;
	color: #888;
	padding: 5px;
}

.acciones:hover{
	color: #303741;
}

.panel-opciones a{
	display: block;
	color: #303741;
	background: #00b046;
	color: #FFF;
	line-height: 20px;
	padding: 5px 10px;
	border-radius: 5px;
	margin: 0 0 5px 5px;
	border: 2px solid #00b046;
}

.panel-opciones a:hover{
	background: #fff;
	color: #00b046;
}

.extracto,
.fecha{
	color: #888;
}

#listado-usuarios a{
	display: block;
	padding: 5px 0;
}

#listado-usuarios{
	margin: 0;
}

.listado-mensajes h3, .listado-mensajes .fecha{
	display: inline-block;
	margin: 0;
}

div.mensaje > p{
	display: inline-block;
	max-width: 80%;
	padding: 20px;
	border-radius: 10px;
	background: #3E8ACC;
	color: #fff;
	text-align: left;
}

#listado-usuarios li{
	border-bottom: 1px dotted #DDD;
}

.listado-mensajes li{
	position: relative;
}

.listado-mensajes li:nth-child(odd):before{
	content: "";
	display: block;
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 0;
	border-color: #3E8ACC transparent transparent transparent;
}

.listado-mensajes li:nth-child(even):before{
	content: "";
	display: block;
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent #3E8ACC transparent transparent;
}

.listado-mensajes li:nth-child(even){
	text-align: right;
}

#listado-usuarios li:last-child{
	border: none;
}


#funciones-rapidas{
	position: absolute;
	right: 0;
	top: 0;
  }

  #nav-principal li,
  #funciones-rapidas li{
  	position: relative;
  }

  #msjs:hover > a,
  #msjs:hover > a span{
  	background: #888;
  	color: #fff;
  }

  #msjs .sub{
  	width: 300px;
  }

  .sub{
  	z-index: 10;
  	min-width: 200px;
  	position: absolute;
  	-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.2);
	box-shadow: 0 0 10px 2px rgba(0,0,0,0.2);
  }

  #funciones-rapidas .sub{
  	top: 50px;
  }

  .sub:before{
  	bottom: 100%;
	right: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #FFFFFF;
	border-width: 5px;
  }

  #funciones-rapidas .sub:before{
  	bottom: 100%;
  	left: auto;
	right: 25px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #FFFFFF;
	border-width: 5px;
	margin-left: -5px;
  }

  #funciones-rapidas .sub{
  	right: 0;
  }
  
  .acciones{
	font-size: 25px;
	color: #303741;
	position: relative;
}

.acciones:hover span{
	display: block;
}

.acciones span{
	font-size: 13px;
	top: -100%;
	display: none;
	position: absolute;
	background: rgba(0,0,0,0.8);
	color: #FFF;
	padding: 3px 5px;
	border-radius: 5px;
}

.acciones.disabled{
	color: #999;
	cursor:default;
}

/*******************************************************************************************************************************************************
 *
 *								FIN DE LOS ESTILOS GENERALES
 *
 *******************************************************************************************************************************************************/


/*******************************************************************************************************************************************************
 *
 *								ESTILOS PARA LOS DIFERENTES DISPOSITIVOS WEB, MÓVILES, ETC.
 *
 *******************************************************************************************************************************************************/
@media only screen and (max-width: 800px) {
    /* For mobiles: */

 .listado-respuestas{
	border-top: 2px solid #DDD;
	margin: 20px 0 0 0 !important;
	padding: 10px 0 0 0;
	}
	
	#datos{
	margin-left: 40px;
	}

	.ver-informacion h1{
	text-align: center;
	}

	.ver-informacion h1 i{
	position: static;
	display: block;
	margin: 0 0 10px 0;
	}

	.wrap{
	width: 90%;
	}

	#nav-principal{
	display: none;
	position: absolute;
	width: 100%;
	z-index: 11;
	padding: 20px;
	}

	#nav-principal .sub{
	display: block;
	position: static;
	}

	#titulo h1 span{
	display: block;
	}

	#funciones-rapidas{
	position: absolute;
	top: 0;
	right: 0;
	}

	#usuario span{
	display: none;
	}

	table {
	border: 0;
	}

	table thead {
	display: none;
	}

	table tr {
	display: block;
	}

	table td {
	display: block;
	text-align: right;
	padding: 10px 10px 10px 160px;
	}

	table td:last-child {
	border-bottom: 0;
	}

	table td:before {
	content: attr(data-label);
	float: left;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 0 -150px;
	}

	.opciones{
	text-align: center;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	}

	.opciones h2{
	margin: 0 0 10px 0;
	}

	.panel-head{
	text-align: center;
	}

	.menu-secundario-plus > li{
		width: 50%;
		float: left;
	}

	.menu-secundario-plus > li > a{
		width: 100%;
		display: block;
	}

	.menu-secundario > li{
		margin: 0 0 5px 0;
	}

	.menu-secundario-plus li.mas-opciones{
		width: 100%;
	}

	.menu-secundario-plus .op-menu{
		width: 100%;
		text-align: center;
	}

.modal-content{
		width: 90%;
		margin: -45% 0 0 -45%;
	}

	.listado-mensajes, .msj-respuesta{
		padding: 15px;
	}
}

@media only screen and (min-width: 800px) {
  /* For tablets: */

.panel-content{
  		overflow: auto
  	}

	.listado-respuestas{
		border-left: 2px solid #DDD;
		padding: 0 0 0 20px;
	}
  	.panel-opciones li{
		margin: 0 0 0 5px;
		display: inline-block;
	}

  	.menu-secundario-plus > li{
  		float: left;
  		display: table-cell;
  	}

  	.menu-secundario-plus > li > a{
  		display: table-cell;
  		vertical-align: middle;
  		width: 105px;
  		height: 100px;
  	}

  	.menu-secundario{
  		margin: 0 0 40px 0;
  	}

  	.menu-secundario li{
  		float: left;
  		width: 204px;
  		margin: 0 0 20px 48px;
  	}

  	.menu-secundario li:nth-child(4n+1){
  		margin: 0 0 20px 0;
  	}

	.ver-informacion li{
	padding: 0 0 0 20px;
	}

	.row .cf > li{
	width: 49%;	
	}

	.row .cf > li:nth-child(1){
	float: left;
	}

	.row .cf > li:nth-child(2){
	float: right;
	}

	li.final-accion{
	width: 100% !important;
	float: left;
	}

	.opciones{
	margin: 0 0 10px 0;
	}

	.opciones > h2{
	float: left;
	line-height: 50px;
	margin: 0;
	}

	.pills{
	float: right;
	}

	#nav-principal > li{
	display: inline-block;
	margin: 0 0 0 -4px;
	}

	#nav-principal{
	position: relative;
	top: 8px;
	text-align: center;
	}

	#nav-principal > li > a{
	font-size: 13px;
	}

	.wrap{
	width: 960px;
	}

	.izq{
	float: left;
	}

	.der{
	float: right;
	}

	.panel-head h2{
	float: left;
	}

	.panel-opciones{	
	float: right;
	}

	#listado-usuarios a{
	display: table;
	}

	#listado-usuarios h3,
	#listado-usuarios .extracto, #listado-usuarios .fecha{
	display: table-cell;
	padding: 10px;
	vertical-align: middle;
	}

	#listado-usuarios h3{
	width: 20%;
	}

	#listado-usuarios .extracto{
	width: 60%;
	}

	#listado-usuarios .fecha{
	text-align: right;
	width: 20%;
	}

	.ver-informacion h1{
	padding: 0 0 10px 40px;
	}
.msjs-recibidos{
		float: left;
		width: 40%;
		max-height: 628px;
		overflow: scroll;
	}

	.mensajes{
		padding-left: 15px;
		padding-right: 15px;
		float: right;
		width: 60%;
		max-height: 480px;
		overflow: scroll;
		min-height: 480px;
	}

	.msj-respuesta{
		background: #EEE;
		padding-right: 15px;
		float: right;
		width: 60%;
		padding-left: 15px;
	}

	.modal-content{
		width: 50%;
		margin: -15% 0 0 -25%;
	}
  
}

@media only screen and (min-width: 1240px) {
    /* For desktop: */

    .wrap{
    width: 1080px;
    }

    .menu-secundario-plus > li > a{
  		display: table-cell;
  		vertical-align: middle;
  		width: 120px;
  	}

    .menu-secundario li{
    	width: 234px;
    	margin: 0 0 20px 48px;
    }

    .menu-secundario li:nth-child(4n+1){
    	margin: 0 0 20px 0;
    }

}



.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.exmpregunta > table {
    width: 100% !important;
}

/***************

DRAG & DROP

*************/

.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}

.box.has-advanced-upload {
  background-color: white;
  outline: 2px dashed black;
  outline-offset: -10px;
}
.box.has-advanced-upload .box__dragndrop {
  display: inline;
}

.box.is-dragover {
  background-color: grey;
}

.box{
margin-top:30px;
	height:100px;
	text-align:center;
	vertical-align:middle;
}

.box__input > label {
    padding-top: 40px;
}


.boxfiles{
	height:auto;
}

/***************

DRAG & DROP

*************/

.progressbar { 
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 20px;
}

.pverde { 
 	background-color: #5CB85C;
 }
 .pamarillo { 
 	background-color: #F0AD4E;
 }
 .projo { 
 	background-color: #D9534F;
 }
 
 .input-total {
    background-color: #eee;
    font-weight: bold;
    text-align: right;
}

.tdtotal{
background-color: #888;
}

/***************

Tablas Censo

*************/
.tablecenso td,
.tablecenso th{
	text-align:right;
}

/***************

Tooltip

*************/
.tooltip{
	color: #303741;
	position: relative;
	text-decoration: none;
	
	display: inline;
	z-index: 999;
}

.tooltip:hover span{
	visibility: visible;
    opacity: 1;	
}

.tooltip span{
	position: absolute;
	z-index: 9999;
	width: 180px;
	left: 50%;
	margin: 0 0 20px -90px;
	bottom: 75%;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
	background: #2a3035;
	opacity: 0;
	cursor: default;
	pointer-events: none;
	border-radius: 5px;
	padding: 3px 5px;
	color: #FFF;
}

.tooltip span::after{
	content: "";
    position: absolute;
	top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
/*UPLOAD FILES*/
.file-field input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
	display: inline-block;
}

.file-field {
    position: relative;
}

.input-field {
    position: relative;	
}

.btn {
    text-decoration: none;
    text-align: center;
    letter-spacing: .5px;
    transition: .2s ease-out;
    transition-property: initial;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    transition-delay: initial;
    cursor: pointer;
	outline: 0;
	border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 2rem;
    vertical-align: middle;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}