*{
  box-sizing:border-box;
  margin: 0; padding: 0;
  font-family: "Alegreya Sans", sans-serif;
}
.pantalla{
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
.elcentro{
  width: 80%;
  margin-left: 5%;
  margin-right: 5%;
}
.elcentro1{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}
.elcentro2{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}

.elcentro3{
  width: 86%;
  margin-left: 2%;
  margin-right: 2%;
}
.elcentro4{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

.elcentro5{
  width: 90%;
  
}

.elframe{
  font-size:12px;
  margin-top:-8px;
  margin-left:7px;
  background: white;
}
.fontico{
  font-size: 14px;
}
.menusa1{
  display: none;

}
#menusa{

  font-size: 12px;
}
.iconos{
  display:  block;
}



.login{
  width: 88%;
  margin-left: 1%;
  margin-right: 1%;
}
.login1{
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
}
.login2{
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}


.navbar ul{
  list-style-type: none;
  text-decoration: none;
  text-align: right;
}

.tabla{
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

}
.tabla2{
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;

}
.tabla3{
  height: 420px;
  overflow-y: auto;
  overflow-x: hidden;

}

.tabla1{
  height: 135px;
  overflow-y: auto;
  overflow-x: hidden;
}

body{

  background-image: url("../images/fondoazul.png");
  /*background-color: black;*/
  background-repeat: no-repeat;
  background-size:  cover;
}
#verso{
  background-image: url('../images/mar.jpg');
  background-repeat: no-repeat;
  background-size:  cover;


}

.degrada{
  background: rgba(29,86,140,1);
  background: -moz-linear-gradient(top, rgba(29,86,140,1) 0%, rgba(13,50,89,1) 50%, rgba(29,86,140,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(29,86,140,1)), color-stop(50%, rgba(13,50,89,1)), color-stop(100%, rgba(29,86,140,1)));
  background: -webkit-linear-gradient(top, rgba(29,86,140,1) 0%, rgba(13,50,89,1) 50%, rgba(29,86,140,1) 100%);
  background: -o-linear-gradient(top, rgba(29,86,140,1) 0%, rgba(13,50,89,1) 50%, rgba(29,86,140,1) 100%);
  background: -ms-linear-gradient(top, rgba(29,86,140,1) 0%, rgba(13,50,89,1) 50%, rgba(29,86,140,1) 100%);
  background: linear-gradient(to bottom, rgba(29,86,140,1) 0%, rgba(13,50,89,1) 50%, rgba(29,86,140,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d568c', endColorstr='#1d568c', GradientType=0 );
}
.degrada5{
  background: rgba(181,138,11,1);
  background: -moz-linear-gradient(top, rgba(181,138,11,1) 0%, rgba(181,138,11,1) 16%, rgba(209,167,69,1) 49%, rgba(181,139,13,1) 87%, rgba(181,139,13,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(181,138,11,1)), color-stop(16%, rgba(181,138,11,1)), color-stop(49%, rgba(209,167,69,1)), color-stop(87%, rgba(181,139,13,1)), color-stop(100%, rgba(181,139,13,1)));
  background: -webkit-linear-gradient(top, rgba(181,138,11,1) 0%, rgba(181,138,11,1) 16%, rgba(209,167,69,1) 49%, rgba(181,139,13,1) 87%, rgba(181,139,13,1) 100%);
  background: -o-linear-gradient(top, rgba(181,138,11,1) 0%, rgba(181,138,11,1) 16%, rgba(209,167,69,1) 49%, rgba(181,139,13,1) 87%, rgba(181,139,13,1) 100%);
  background: -ms-linear-gradient(top, rgba(181,138,11,1) 0%, rgba(181,138,11,1) 16%, rgba(209,167,69,1) 49%, rgba(181,139,13,1) 87%, rgba(181,139,13,1) 100%);
  background: linear-gradient(to bottom, rgba(181,138,11,1) 0%, rgba(181,138,11,1) 16%, rgba(209,167,69,1) 49%, rgba(181,139,13,1) 87%, rgba(181,139,13,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b58a0b', endColorstr='#b58b0d', GradientType=0 );
}
.degrada2{
  background: rgba(0,191,0,1);
  background: -moz-linear-gradient(top, rgba(0,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,191,0,1)), color-stop(50%, rgba(191,143,0,1)), color-stop(94%, rgba(255,188,5,1)), color-stop(100%, rgba(227,227,45,1)));
  background: -webkit-linear-gradient(top, rgba(0,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: -o-linear-gradient(top, rgba(255,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: -ms-linear-gradient(top, rgba(0,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: linear-gradient(to bottom, rgba(255,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf00', endColorstr='#e3e32d', GradientType=0 );
}
.negrodegrada{
  margin: 0;
  padding: 0;
  background: rgba(0,50,0,1);
  background: -moz-linear-gradient(top, rgba(0,20,0,1) 0%, rgba(0,50,0,1) 50%, rgba(0,60,5,1) 94%, rgba(0,0,45,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,191,0,1)), color-stop(50%, rgba(191,143,0,1)), color-stop(94%, rgba(255,188,5,1)), color-stop(100%, rgba(227,227,45,1)));
  background: -webkit-linear-gradient(top, rgba(0,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: -o-linear-gradient(top, rgba(0,191,0,1) 0%, rgba(191,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: -ms-linear-gradient(top, rgba(0,191,0,1) 0%, rgba(0,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  background: linear-gradient(to bottom, rgba(0,191,0,1) 0%, rgba(0,143,0,1) 50%, rgba(255,188,5,1) 94%, rgba(227,227,45,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf00', endColorstr='#e3e32d', GradientType=0 );
}
.rayadegra1{
  border: 3px solid rgba(255,191,0,1);
}
.rayadegradorado{
  border: 3px solid rgba(181,138,11,1);
}
.rayadegra{
  border: 3px solid rgba(29,86,140,1);
}

.rayadegrabajo{
  border-bottom: 1px solid rgba(29,86,140,1);
}

.rayadegraaa{
  border-bottom: 1px solid rgba(29,86,140,1);
}

.rayadegra1p{
  border: 1px solid rgba(29,86,140,1);
}
.rayadegra1p1{
  border: 1px solid rgba(181,138,11,1);
}
.rayadegrab{
  border-bottom: 3px solid rgba(29,86,140,1);
}

.degrada1{
  background-color: rgba(255,191,0,1);
}

#menu li:hover a:hover {
  background-color: black;
}

.elpie {
	font-size: 12px;
	text-align: center;
	color: #fff;
  background: rgba(76,76,76,1);
  background: -webkit-linear-gradient(rgba(76,76,76,1) 0%, rgba(44,44,44,1) 0%, rgba(17,17,17,1) 24%, rgba(4,4,4,1) 51%, rgba(0,0,0,1) 58%, rgba(12,12,12,1) 84%, rgba(19,19,19,1) 100%);
  background: -o-linear-gradient(rgba(76,76,76,1) 0%, rgba(44,44,44,1) 0%, rgba(17,17,17,1) 24%, rgba(4,4,4,1) 51%, rgba(0,0,0,1) 58%, rgba(12,12,12,1) 84%, rgba(19,19,19,1) 100%);
  background: linear-gradient(rgba(76,76,76,1) 0%, rgba(44,44,44,1) 0%, rgba(17,17,17,1) 24%, rgba(4,4,4,1) 51%, rgba(0,0,0,1) 58%, rgba(12,12,12,1) 84%, rgba(19,19,19,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
 }

#iconos{
  cursor: pointer;
}

#logo img{
  margin: 1%;
  padding: 1%;
  max-height: 250px;
  max-width: 250px;

}


.boton3:hover{
  color: #E2DD75;
}

.boton4:hover{
  color: #E2DD75;
}

#form2 button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: yellow;
}

.peq{
  width: 5px;
  height: 5px;
}
.fontcabeza{
  font-size: 25px;
}
.elpie1{
  width: 30%;
}
.elpie2{
  width: 40%;
}
.elpie3{
  width: 25%;
}

#logo{
  width: 20%;
}
#elslider{
  width: 80%;
}
.fontolvido{
  font-size: 16px;
}
.mifoto{
  width: 48%;
}
.mensajes{
  width: 65%;
}

.panel1{
  width: 30%;
}
.panel2{
  width: 30%;
}
.tablaingreso{
  width: 48%;
}

.labarra{
  width: 70%;
  font-size: 12px;
}
.labarra2{
  width: 75%;
  font-size: 12px;
}
.labarra1{
  width: 30%;
}
.labarra4{
  width: 25%;
}

#ladata{
  width: 75%;
}
.segrabo{
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

@media (max-width: 1024px) {
  .pantalla{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  #menusa{
    font-size: 8px;
  }
  .panel1{
    width: 47%;
  }
  .panel2{
    width: 100%;
  }
  .tablaingreso{
    width: 98%;
  }
  .fontolvido{
    font-size: 14px;
  }
  #logo{
    width: 20%;
  }
  #elslider{
    width: 80%;
  }

  .fontcabeza{
    font-size: 20px;
  }
  .fontico{
    font-size: 10px;
  }


  .login{
    width: 88%;
    margin-left: 1%;
    margin-right: 1%;
  }
  .login1{
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
  .login2{
    width: 98%;
    margin-left: 10%;
    margin-right: 10%;
  }
  #nombre {
    width: 50%;
  }
  #apellido {
    width: 50%;
  }
  #apellido {
    width: 50%;
  }
  #lafoto{
    display: none !important;
  }

  #dni{
    width: 50% !important;
  }
  #email{
    width: 50% !important;
  }




}


@media (max-width: 500px) {
  .pantalla{
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
  }
  .elcentro{
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
  }
  .elcentro1{
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
  }
  .elcentro2{
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
  }
  .elcentro3{
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
  }

  .segrabo{
    width: 90%;
  }
  .labarra{
    width: 100%;
    font-size: 14px;
  }
  .labarra2{
    width: 100%;
    font-size: 14px;
  }
  #ladata{
    width: 100%;
  }
  .labarra1{
    width: 100%;
  }
  #menusa{
    display: none;
  }
  .menusa1{
    display: block;
    font-size: 12px;
  }

  .tablaingreso{
    width: 98%;
  }
  .panel1{
    width: 97%;
  }
  .panel2{
    width: 100%;
  }
  .mifoto{
    width: 100%;
  }
  .mensajes{
    width: 100%;
  }
  .fontolvido{
    font-size: 10px;
  }
  #logo{
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
  }
  #elslider{
    display: none;
  }
  .elpie1{
    width: 100%;
  }
  .elpie2{
    width: 100%;
  }
  .elpie3{
    width: 100%;
  }

  .fontcabeza{
    font-size: 14px;
  }

  .iconos{
    display: none;
  }

  .login{
    width: 95%;
    margin-left: 1%;
    margin-right: 1%;
  }
  .login1{
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
  .login2{
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
  }



  #nombre {
    width: 100%;
  }
  #apellido {
    width: 100%;
  }
  #apellido {
    width: 100%;
  }
  #lafoto{
    display: flex !important;
    justify-content: center;

    width: 100%;

  }


  #dni{
    width: 100% !important;
  }

  #mail{
    width: 100% !important;
  }
  #email1{
    width: 100% !important;
  }
  #usuario{
    width: 100%;
  }





}