body {
  display: flex;
  justify-content: center;
  align-items: center;
background: #003fc7;
background: linear-gradient(0deg,rgba(0, 63, 199, 1) 0%, rgba(0, 120, 212, 1) 10%, rgba(255, 255, 255, 1) 100%);
}

.tabla {
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border-radius: 15px;
    border-collapse: collapse;
}

.imagen-contenedor {
  height: 132px; 
  overflow: hidden; }

.imagen-contenedor img {
  object-fit: cover; 
  object-position: center; }


.form{
	margin-left: 30px;
		width: 90%;
		height: 50px;
		position: relative;
		overflow: hidden;
	}
.form input{
		 font-weight: 600;
    font-size: 18px;
		width: 85%;
		height: 100%;
		background: none;
		padding-top: 20px;
		border: none;
		outline: 0px;
		border-bottom: 1px solid #000;
	}


	.form .lbl-nombre{			
		font-size: 20px;
		position: absolute;
		bottom: 0px;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;

	}

	.text-nomb{
		position: absolute;
		bottom: 5px;
		margin-left: 10px;
		left: 0;
		transition: all 0.3s ease;
		color:#686868;
	}
	.form input:focus + .lbl-nombre .text-nomb,.form input:valid + .lbl-nombre .text-nomb{
		transform: translateY(-150%);
		margin-left: -1px;
		font-size: 15px;
		font-weight: 800;
	}
	.form input:focus + .lbl-nombre:after, .form input:valid + .lbl-nombre:after{
		transform: translateX(0%);
	}



.registro {
 font-family: 'Kreon', serif;
    font-size: 30px;
	color: #2E2E2E;
	font-weight: 800;   
}

.registro2 {
 font-family: 'Kreon', serif;
    font-size: 23px;
	color: #00235C;
	font-weight:800;
}
.registro3 {
 font-family: 'Kreon', serif;
    font-size: 22px;
	color: #000;
	left:20px;
	}


.left{
	background: #F3F3F3;
	height: 550px;
	width: 300px;
	margin-right: -5px;
border-radius:15px 0 0 15px; }

.alerta{
	z-index: 1;
	 background-color: #000;
	color:#fff;
	 border: 1px solid #A6A6A6;
	font-size: 16px; 
	font-weight:700; 
		box-shadow:
  /*bottom shadow*/
  0px 2px 2px rgba(0,0,0,0.2),
  0px 5px 1px rgba(0,0,0,0.2),
  /*long bottom shadow*/
  0px 7px 5px rgba(0,0,0,0.4),
  /*right shadow*/
  3px 5px 5px rgba(0,0,0,0.2),
  /*left shadow*/
  -3px 5px 5px rgba(0,0,0,0.2),
  /*right inset*/
  inset 2px 0px 6px rgba(0,0,0,0.1),
  /*left inset*/
  inset -2px 0px 6px rgba(0,0,0,0.1);
	   display: inline-block;
    position: relative;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 10px;
    padding: 8px;
    margin-top: 50px;
}

.alerta:before {
    content: '';
    display: block;  
    position: absolute;
    left: 10px;
	top: 37px;   
    border: 10px solid transparent;
    border-bottom-color: black;
	 transform: rotate(180deg);
} 

.alerta:after {
    content: '';
    display: block;  
    position: absolute;
    left: 11px;
	top: 36px;
    border: 9px solid transparent;
    border-bottom-color: #000;
	 transform: rotate(180deg);
}

.alerta2{
	z-index: 1;
	 background-color: #FB0000;	
	color: #FFFFFF;
	 border: 1px solid #A6A6A6;
	font-size: 16px; 
	font-weight:700; 
		box-shadow:
  /*bottom shadow*/
  0px 2px 2px rgba(0,0,0,0.2),
  0px 5px 1px rgba(0,0,0,0.2),
  /*long bottom shadow*/
  0px 7px 5px rgba(0,0,0,0.4),
  /*right shadow*/
  3px 5px 5px rgba(0,0,0,0.2),
  /*left shadow*/
  -3px 5px 5px rgba(0,0,0,0.2),
  /*right inset*/
  inset 2px 0px 6px rgba(0,0,0,0.1),
  /*left inset*/
  inset -2px 0px 6px rgba(0,0,0,0.1);
	   display: inline-block;
    position: absolute;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 10px;
    padding: 8px;
	margin-left: 230px;
    }

.alerta2:before {
    content: '';
    display: block;  
    position: absolute;
    left: -19px;
	top: 8px;   
    border: 10px solid transparent;
    border-bottom-color: black;
	 transform: rotate(270deg);
} 

.alerta2:after {
    content: '';
    display: block;  
    position: absolute;
    left: -17px;
	top: 9px;
    border: 9px solid transparent;
    border-bottom-color: #FB0000;
	 transform: rotate(270deg);
}


.button {
   position: absolute;
	margin-left: -90px;

    -webkit-border-radius: 10px;    
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
	letter-spacing: 3px;
    background-color:  #9D9D9D; 
		background-image: -moz-linear-gradient(#B7B7B7, #9D9D9D); 
		background-image: -webkit-gradient(linear, left top, left bottom, from(#B7B7B7), to(#9D9D9D));	
		background-image: -webkit-linear-gradient(#B7B7B7, #9D9D9D);	

    -webkit-border-radius: 10px;     
    display: inline-block;
     padding: 6px 30px 6px 30px;    
    color: #262626;
    text-transform: uppercase;   
    font-weight: 700;
    font-size: 20px;    

}

        .button span:hover {     
			 color: #003891;
            cursor: pointer;
			box-shadow:0 0 10px 0 #003A96;
		
        }

        .button:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

        .button:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }