body{
width:100%;
height:100vh;
background-color:white;
}
.container-form{
  width:22em;
  height:30em;
  margin:auto auto;
  margin-top:10em;
  text-align:center;
  justify-content:center;
 /* box-shadow: 10px 10px 8px #888888; */
}
#ingresar{
 height:26em;
 box-shadow: 10px 10px 8px #888888;
}
 .container-form  #ingresar .cerrar{
  position:absolute;
  background:red;
  color:white;
  border-radius:50px;
  left:53em;
  padding:5px 8px;
  text-decoration:none;
  top:29.3em;
 }
 .container-form #registros .cerrar{
  position:absolute;
  background:black;
  color:white;
  border-radius:50px;
  left:28em;
  padding:7px 10px;
  text-decoration:none;
  top:23rem;
 }
.container-form h3{
 font-size:1.5em;
} 
.container-form img{
  width:100%;
  height:10rem;
  border-radius:15px;
}
.container-form input{
 font-weight:15px;
 padding-bottom:10px;
 height:17px;
 width:95%;
 border-radius: 4px 8px 4px 8px;
 margin-bottom:7px;
}
#estilo_boton{
    height:1.5em;
	width:60%;
	font-size:1em;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #eee;
	padding-right:10px;
    border-radius: 8px 8px 8px 8px;
}

#estilo_boton:hover {
    background: #ddd;
}
#registros{
 position:absolute;
 width:30em;
 height:27rem;
 top:10px;
 left:10em;
 background:rgba( 18, 157, 254 ,0.5);
display:none;
 box-shadow: 10px 10px 8px #888888; 
}

@media screen and (max-width: 768px){
 #registros{
   left:1px;
   width:100%;
   font-size:10px;
  }  
}



#registros img{
  width:5em;
  height:5em;
}
#registros input{
font-weight:15px;
 padding-bottom:10px;
 height:17px;
 width:80%;
 border-radius: 4px 8px 4px 8px;
 margin-bottom:7px;
}
#registros .boton_grabar{
    height:1.5em;
	width:35%;
	font-size:1em;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 8px 8px 8px 8px;
	margin-right:10px;
}

#registros .boton_grabar:hover {
    background: #ddd;
}