@charset "UTF-8";

.passkeyhead2 {
	background: linear-gradient(45deg, #2937f0, #9f1ae2) !important;
	padding-top: 14.5em;
	padding-bottom: 10rem;
}
#advantage {
	background-color: #f5f5f5;
	height: 400px;
	padding: 50px 20% 30px 20%;
	position: relative;
	z-index: -1;
}
.definition {
	padding-bottom: 50px;
}
.definition img {
	padding-bottom: 40px;
}
.swiper-pagination {
	padding-bottom: -50px;
}
.display-1 {
	color: #ffffff;
}

.login-wrap {
	width: 60%;
	margin: 0 auto;
	background-color: #fff;
	padding: 30px;
	border-radius: 8px;
}

.logo {
	margin: 4px 4px 7px 4px;
}
/***background: linear-gradient(137deg, #fff6b7, #f77c99, #6578f2, #c2ffd8);*
background:linear-gradient(-45deg, #082beb, #e73c7e, #2623d5, #0bc9c3)
background-size: 100%;**/
/*
-webkit-animation: AnimationName 16s ease infinite;
-moz-animation: AnimationName 16s ease infinite;
-o-animation: AnimationName 16s ease infinite;
animation: AnimationName 16s ease infinite;
*/
@-webkit-keyframes AnimationName {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-moz-keyframes AnimationName {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-o-keyframes AnimationName {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes AnimationName {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.passkeyhead {
	/*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
	background: linear-gradient(-45deg, #456089, #7a00ff, #000000, #908dff);
	/*background:linear-gradient(-45deg, #a900ff, #7439b5, #201364, #0850ff);*/
	background-size: 400% 400%;
	animation: AnimationName 10s ease infinite;
	width: 100%;
	height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* top: 35%; */
	text-align: center;
	margin-top: 67px;
}

@media (max-width: 768px) {
	.passkeyhead {
		margin: 72px 0 0px 0;
		background-size: 400% 400%;
		padding: 2rem 0;
		animation: AnimationName 5s ease infinite;
		width: 100%;
		height: 100%;
		min-height: 815px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: 35%;
		text-align: center;
	}

	.login-wrap {
		width: 100%;
		margin: 0 auto;
		padding: 20px 10px;
	}

	.mb-5 {
		margin-bottom: 3rem !important;
	}

	#advantage {
		background-color: #f5f5f5;
		height: 500px;
		padding: 50px 0% 30px 0%;
	}
	.lead {
		font-size: 0.5rem;
		font-weight: 300;
	}

	.definition img {
		padding-bottom: 40px;
		width: 80%;
	}
}
@media (max-width: 480px) {
	.passkeyhead {
		height: 100%;
		padding: 20px 0;
	}
}

.passkeys-body {
	width: 100%;
	height: 100vh;
}
/* .passkeys-body #root {
	width: 100%;
	height: 100vh;
} */

/* .passkeys-body #root {
	border: 1px solid #000;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	max-width: 440px;
	width: calc(100% - 10px);
} */