*
{
	margin: 0;
	padding: 0;
}

@font-face
{
	font-family: "Code128bWin";
	src: url("../font/Code128bWinLarge.ttf") format("truetype");
	font-family: "Code39";
	src: url("../font/Code39.ttf") format("truetype");
	font-family: "Code128";
	src: url("../font/Code128.ttf")format("truetype");
	font-family: "Atelier";
	src: url("../font/Atelier.ttf")format("truetype");

	/*src: url("../font/Code128bWinLarge.ttf") format("truetype");*/

}
header#cabecera{
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 130px;
	background:#290E06  ;
	

}
header div#izquierda{
	width: 70px;
	height: 130px;
	
	float: left;
	background:#290E06  ;

}
header div#centro{
	width: 82%;
	height: 130px;
	background:#290E06 ;
	float: left;
	
}
header div#derecha{
	width: 10%;
	height: 130px;
	
	float: left;
	background:#290E06  ;
}

section div#izquierda{
    width: 50%;
    background: none;
    text-align: left; 
    display: inline-block;
}

section div#derecha{
    width: 25%;
    text-align: left;
    display: inline-block;
}
#contentmenu{
	
	background:black

}
.content-menu{
	width: 70px;
	height: 600px;
	background-color: #e9ddaf;
	color: white;
}
.content-menu-i{
	transform: translate(-100px);
}
.content-menu li{
	list-style: none;
	text-align: center;
	padding: 20px;
	
}
.content-menu li:hover{
	
	background: #decd87;
}

#titulomatriz{
	padding: 0;
	margin: 0;
	background: black;
	color: brown;
	font-family: arial;
	 font-weight: bold;
	 text-align:left;
	
	
	font-size: 1.7em;
	
}

#ver{
			background-color: none;
			height: 70px;
			width: 650px;
			text-align:left;
}
#caja{
			background: #d1dc93;
			border: none;
			border-radius: 30px;
			height: 40px;
			width: 200px;
}
::-webkit-input-placeholder {

			color: #6f6a69;
			font-family: Arial;
			font-size: 16px;
			font-weight: bold;
			text-align: center;

		}
::-moz-placeholder {

			color: #6f6a69;
			font-family: Arial;
			font-size: 16px;
			font-weight: bold;
			text-align: center;

		}

:-ms-input-placeholder {
			color: #6f6a69;
			font-family: Arial;
			font-size: 16px;
			font-weight: bold;
			text-align: center;

		}

a {

	color: #F60;
	text-decoration: none;

}
a:hover {

	color: black;

}

article {

	background: white;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: left;
	vertical-align: left;


}


article, #principal{

	margin: 0;
	padding: 0;
	width: 100%;
	display: inline-block;
	text-align: left;
	background: none;


}


body {

	/*background-color: #f4eed7;*/
	background-image: url('../img/background/028.png');
	font-family: tahoma;
	background-size: 110%;
	
}
body#rec{

	/*background-color: #f4eed7;*/
	background-image: url('../img/recuperacion.jpg');
	font-family: tahoma;
	background-size: 110%;
	
}
main{
	padding: 0;
	margin: 0;

	display: flex;
}
header{


	background: white;
	text-align: center;
	text-align: left;



}
#clave
{

	text-align: center;
	border: none;
	background: none;
	vertical-align: center;
	width: 100%;
	height: 90%;


}
aside{

	background-color: white;
	color: white;
	text-decoration: bold;
}
fieldset{

	right: 50px;
	background-color: #6f7c91;
	margin-left: 40%; margin-right: 40%;

}
fieldset#mensajetitulo{

	right: 100px;
	background-color: #3DAC2F;
	margin-left: 2%; margin-right: 2%;
	border:0;
	border-radius:20px;
	margin: 50px;
	padding: 10px;
	color: white;

}
fieldset#mensajenuevo{

	right: 10px;
	background-color: orange;
	margin-left: 5%; margin-right: 5%;
	border:0;
	border-radius:10px;


}
fieldset#mensajevisto{

	right: 10px;
	background-color: #e6e6e6;
	margin-left: 10%; margin-right: 10%;
	border:0;
	border-radius:10px;


}
fieldset#mensajemasivo{

	right: 10px;
	background-color: #87de87;
	margin-left: 6%; margin-right: 6%;
	border:0;
	border-radius:10px;


}
fieldset#mensajemasivosinver{

	right: 10px;
	background-color: #8D2DAF;
	margin-left: 6%; margin-right: 6%;
	border:0;
	border-radius:10px;


}
fieldset#mensajepropio{

	right: 1px;
	background-color: #87de87;
	margin-left: 1%; margin-right: 30%;
	border:0;
	border-radius:10px;


}
fieldset#mensajetercero{

	right: 1px;
	background-color: #e6e6e6;
	margin-left: 30%; margin-right: 1%;
	border:0;
	border-radius:10px;


}
footer{

	position: absolute;
	bottom: 0;

}
p
{
	font-size: 1em;
	color: black;

}

#entrar
{
	background: #e2e3db;
	height: 40px;
	width: 142px;
	border: none;

}
#llave
{
	background-image: url("../img/candado.png");
	background-repeat: no-repeat;
	height: 40px;
	width: 142px;
	border: none;

}
#bienvenidos
{
	font-size: 1.5em;

}
#version
{
	font-size: 1.2em;
	color: white;
}

#salir
{


background-image: url("../img/salir.png");
	height: 140px;
	width: 142px;

}

nav, #contenido{


	background: none;
	display: inline-block;
	margin: .10em;
	width: 20%;
	vertical-align: middle;



}
nav > article > ul li {

	display: inline;
	padding: 10px;

}


nav#menu
{

	

	text-align: center;
	margin-left: 0%; margin-right: 10%;
	width: 100%;
	height: 130px;
	margin: 0;
	padding: 0;
	vertical-align: top;
	align-content: center;


}
nav > ul > li#menuover{
	background: red;
}
nav#usuario{
	background-color: #decd87;
	text-align: center;
	margin-left: 0; margin-right: 0;
	margin: 0;
	padding: 0;
	width: 150px;
	height: 168px;
	border-radius: 0px;
	

}



#contenido{

	margin: 1%;
	background-color: none;
	width: 100%;
}
#principal
{

/*background-image: url("../img/fondoInicio1.png");
background-repeat: no-repeat;*/
background-color: none;
margin: 10px 10px;
width: 95%;
vertical-align: top;

}



ul	{

	list-style: none;
}

e {
	font-size: 1.2em;
	color: #b3ff80;
	font-style: italic;
	background-color: #5aa02c;
	
}

er {
	font-size: 1.2em;
	color: white;
	font-style: italic;
	background: #ff6600;
	
	
}
al {

	font-size: 1.2em;
	color: black;
	font-style: italic;
	background-color: #ffff00;

}
re {
	
	font-size: 1.3em;
	color: black;
	background-color: #5f8dd3;

}
#si {
	font-size: 1.2em;
	color: #b3ff80;
	font-style: italic;
	background-color: #5aa02c;
	
}

#usuario, #menu{
	display: inline-block;

}



table{
	background: none;
	border:  0px solid;
	border-collapse: collapse; 
}
td{
	font-size: 0.8em;
	color: black;
	background: none;
	border:  #5f8dd3 0px solid;
	border-collapse: collapse; 
	margin: 5px;
	padding: 5px;
	width: 100px;
	height: 40px;
	text-align: center;


}
td, #libro
{
	color: black;
	background: none;
	border:  #5f8dd3 0px solid;
	border-collapse: collapse; 
	margin: 5px;
	padding: 5px;
	width: 120px;
	height: 40px;
	text-align: center;
}
td, #detalle
{
	color: black;
	background: none;
	border:  #5f8dd3 0px solid;
	border-collapse: collapse; 
	margin: 5px;
	padding: 5px;
	width: 180px;
	height: 40px;
	text-align: center;
}
#lupa{
	width: 20px;
	background: none;

}
#cruz
{
	width: 20px;
	background: none;
	border: 1px;
}
#titulos
{
	background: none;
	height: 10px;
}
#gris
{
	background: #f4eed7;
	font-size: 1.2em;
	font-family: arial;
	color: grey;
}
#grisclaro
{
	background: red;
	font-size: 1.2em;
	font-family: arial;
	color: grey;
}
#gristexto
{
	background: #f4eed7;
	font-size: .7em;
	font-family: arial;
	color: grey;
}
#blancotexto
{
	background: white;
	font-size: .7em;
	font-family: arial;
	color: grey;
}
#azul
{
	background: #87aade;
}
#celeste
{
	border: 0px solid;
	background: #aaaaff;
}
#amarillo
{
	border: 0px solid;
	background: #e5ff80;

}
#grisliqui
{
	border: 0px solid;
	background: #D6DBDF;
	font-size: 1.2em;


}
#verdeliqui
{
	border: 0px solid;
	background: #D4EFDF;
	font-size: 1.2em;
	


}
#verde
{
	border: 0px solid;
	background: #5aa02c;
	
}
#naranja
{
	border: 0px solid;
	background: orange;
	
}
#rojo
{
	border: 0px solid;
	background: red;
	color:white;
	
}
#negro
{
	border: 0px solid;
	background: black;
	color: white;
	margin: 10px;
	align-content: center;
	
}
#caracteristica
{
	width: 100px;
}
section p
{
	text-align: justify;
	color: black;
}

#pdoble1,#pdoble2
{

	text-align: center;
	display: inline-block;
	margin: 2px;
	padding: 1px;
	
	border: 1px;

}
#pdoble1
{
	background: #edf1ef;
	width: 40%;

}
#pdoble2
{
	vertical-align: top;
	background: #edf1ef;
	width: 58%;
}

.boton {

	border: 0;
	
	background: #0C8D39  ;
	margin: 10px;
	padding: 10px;
	font-size: 1.2em;
	color: white;
	cursor: pointer;
	border-radius: 15px;

}
.boton2 {

	border: 0;
	background: red;
	margin: 10px;
	padding: 10px;
	font-size: 1em;
	color: white;
	cursor: pointer;

}




#index {

	background-image:  url("../img/index.jpg");	
	background-repeat: no-repeat;
	background-position: center;
}

#error {


background: white;
float: right;
border-bottom: 


}
fondo
{
	
	
	margin: -10px;
	padding: -10px;
	height: 100%x;
	width: 100%;

}

#blanconegro {


	background: black;
	color: white;
	font-style: bold;
	
}
#chat
{
	background: none;
	font-family: tahoma;
	width: 505px;
	height: 355px;


}


#chattitulo
{
	background: #dace0c;
	width: 500px;
	height: 40px;
	text-align: left;
	vertical-align: center;

	

}
#chatinfo
{
	background: #55ff55;
	width: 500px;
	height: 80px;
	color: green;
	
}
#chatcuerpo
{
	background: white;
	width: 500px;
	height: 200px;
	
}
#chatestado
{
	background: #dace0c;
	width: 500px;
	height: 50px;
	
}

.flecha {

	border: 0;
	background: none;
	margin: 2px;
	padding: 2px;
	font-size: 1em;
	color: white;
	
}
.contenedor-alerta{

	
	width: 1300px;
	height: 600px;
	
	
	
	text-align: center;
	background: ;

	background-image: url("../img/dioramas/pensar.png");
	background-repeat: no-repeat;


}
.alerta{

	background: #3DD47F  ;
	width: 500px;
	height: 220px;
	vertical-align: middle;
	position: absolute;
	top: 30%;
	left: 30%;
	align-content: center;
	text-align: center;

}
.alerta-si{

	background: green; 
	color:white;
	font-size: 1.5em; 
	margin:15px;
	padding: 10px;
	border-radius: 10px;

	

}
.alerta-no{

	background: red; 
	color:white;
	font-size: 1.5em; 
	margin:15px;
	padding: 10px;
	border-radius: 10px;
	

}
.contenedor-pass{

	
	width: 1300px;
	height: 600px;
	
	
	
	text-align: center;
	background: ;

	background-image: url("../img/dioramas/pass.png");
	background-repeat: no-repeat;


}
select
{
	background: #e9ddaf;
	border: none;
	width: auto;
	height: 28px;
	font-family: tahoma;
	font-size: 1em;
	color: black;

}
option
{
	background:  #71c837;
	border: none;
	color: black;
	height: 30px;
	font-family: tahoma;
	font-size: 1em;
}

i
{
	font-family: tahoma;
	font-size: 1.4em;
}

{
	height: 1px;
	border: none;
}
.principales
{
		background: rgb(43, 19, 15 , 0.2);
		font-family: arial;
		font-weight: bold;
		font-size: 5em;
		color: white;

}
div#datosmutuo
{
	margin: 0;
	padding: 0;
	background: #f4eed7;
	width: 1200px;
	height: 300px;
	
}
section#datos1
{
	margin: 0;
	padding: 0;
	background: #f4eed7;
	width: 600px;
	height: 300px;
	text-align: center;
	float: left;

}
section#datos2
{
	margin: 0;
	padding: 0;
	background: #e5ff80;
	width: 600px;
	height: 300px;
	text-align: center;
	float: left;
}

.resaltado01{

	background:orange;
	height: 40px;
	font-size:1.5em;
	color:white;
	width: 200px;
	border:0;
	border-radius:20px;
	text-align: center;

}
.resaltado02{

	background:orange;
	height: 40px;
	font-size:1.2em;
	color:white;
	width: 200px;
	border:0;
	border-radius:20px;
	text-align: center;

}
.resaltado03{

	background:#62CD48;
	height: 40px;
	font-size:1.2em;
	color:white;
	width: 200px;
	border:0;
	border-radius:20px;
	text-align: center;

}
#titulo
{
	font-size: .7em;
	color: black;
	text-align: right;


}
#titulo2
{
	font-size: 1.5em;
	color: red;
	text-align: right;
}
#texto1
{
	font-size: .9em;
	color: black;
	text-align: left;
}
#texto2
{
	font-size: 1.2em;
	color: black;
	text-align: left;

}
#texto3
{
	font-size: .9em;
	color: black;
	text-align: center;

}
#texto4
{
	font-size: .8em;
	color: black;
	text-align: justify;

}
#texto5
{
	font-size: .7em;
	color: black;
	text-align: left;
	text-align : justify;
}
#texto6
{
	font-size: .6em;
	color: black;
	text-align: left;
	text-align : justify;
}
#texto7
{
	font-size: .5em;
	color: black;
	text-align: left;
	text-align : justify;
}
#texto8
{
	font-size: .9em;
	font-family: arial;
	color: black;
	font-weight: bold;
	text-align: left;
	text-align : justify;

}
.debajo{
	height: 40px;
	width: 40px;
	margin-bottom: 60px;
}
.encima{
	height: 20px;
	width: 20px;
	margin-bottom: 60px;
	margin-left: -15px;
}

div#divprincipal{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
    background: none;

}
div > div#divuno{
	width: 33.33%;
	height: 200px;
    background:  rgba(223,137,73, .2);
    float: left;
    margin:auto;
	display:flex;
	align-items: center;
   justify-content: center;

}
div > div#divdos{
	width: 33.33%;
	height: 200px;
    background: rgba(155, 83, 30, .2);
    float: right;
    margin:auto;
	display:flex;
	align-items: center;
   justify-content: center;

}
div > div#divtres{
	width: 33.33%;
	height: 200px;
    background: rgba(79, 34, 4, .2);
    float: right;
    margin:auto;
	display:flex;
	align-items: center;
   justify-content: center;

}
div > div#divcuatro{
	width: 33.33%;
	height: 200px;
    background: rgba(99,192,82, .2);
    float: left;
    margin:auto;
	display:flex;
	align-items: center;
   justify-content: center;

}
div > div#divcinco{
	width: 33.33%;
	height: 200px;
    background: rgba(61, 156, 44, .2);
    float: right;
    margin:auto;
	display:flex;
	align-items: center;
   justify-content: center;

}
div > div#divseis{
	width: 33.33%;
	height: 200px;
    background: rgba(26, 114, 10, .2);
    float: right;
    margin:auto;
	display:flex;
	align-items: center;
   justify-content: center;

}
div > div#divmitadderecha{
	width: 45%;
	height: 300px;
    background: rgba(26, 114, 10, .2);
    float: right;
    margin:auto;
	
	

}
div > div#divmitadizquierda{
	width: 45%;
	height: 300px;
    background: rgba(61, 156, 44, .2);
    float: left;
    margin:auto;
	
	

}

footer{
	
	font-size: .7em;
	text-align: left;
	width: 100%;
	position: fixed;
	bottom: 0;

	background-color: rgba(33, 97, 140,1) ;


}
.codenv{
	background-color: rgba(33, 97, 140,3);
	color: white;
	text-align: center;
	font-size: 3em;
	border-radius: 30px;
	margin: 50px;
}
#cuadradonormal{
	width: 200px;
	height: 200px;
	background:  yellow;
}

#cuadrado{
	width: 200px;
	height: 200px;
	background:  green;
	animation-name: mianimacion;
	animation-duration: 4s;
}

div > div#divunores{
	width: 33.33%;
	height: 200px;
    background:  rgba(223,137,73, .2);
    float: left;
    margin:auto;
	display:flex;
	align-items: center;
   	justify-content: center;
   	animation-name: mianimacion;
	animation-duration: 10s;

}

@keyframes mianimacion {
	0% {background: rgba(223,137,73, .2)}
	33% {background: orange;}
	66% {background: red;}
	100% {background: rgba(223,137,73, .2)}
}