/* card de login */
.card {
	box-sizing: border-box;
	width: 300px;
	height: 404px;
	background: rgba(241, 242, 246, 0.6);
	border: 1px solid white;
	box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);
	/* backdrop-filter: blur(2px); */
	border-radius: 17px;
	text-align: center;
	font-size:25px;
	text-align: center;
	cursor: pointer;
	transition: all 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	user-select: none;
	font-weight: bolder;
	color: black;
	margin-left: 8%;

  }
  
  .card:hover {
	border: 1px solid  #F44336;
	transform: scale(1.15);
  }
  
  .card:active {
	transform: scale(1.95) rotateZ(1.7deg);
  }


/* boton de ingreso */
button {
	display: inline-block;
	width: 150px;
	height: 50px;
	border-radius: 10px;
	border: 1px solid #03045e;
	position: relative;
	overflow: hidden;
	transition: all 0.5s ease-in;
	z-index: 1;
	
}

button::before,
button::after {
	content: '';
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	transform: skew(15deg);
	transition: all 0.5s;
	overflow: hidden;
	z-index: -1;
}

button::before {
	left: -10px;
	background:#ff4d4d;
}

button::after {
	right: -10px;
	background:#ffffff;
}

button:hover::before,
button:hover::after {
	width: 58%;
}

button:hover span {
	color: #000;
	transition: 0.3s;
}

button span {
	color:#ffffff;
	font-size: 18px;
	transition: all 0.3s ease-in;
}