html, body {
	height:100%;
	margin:0;
	padding:0;
}

/* @-webkit-keyframes login_background_move {
	from {
		background-position:0 100%;
	}

	to {
		background-position:0 0;
	}
} */


.login h1 {
	background-repeat:no-repeat;
	background-position:top center;
	background-image:url(LocalSettings/SG_logo_front.png);
	background-size: contain;
	display:marker;
	padding:1.75em 1.75em 0.75em 1.75em;
	text-align:center;
}


#login_body {
	transform: translateZ(0);
	backface-visibility: hidden;
	background: linear-gradient(-135deg, #ff88ec 0%, #ffcf7c 50%, #22c6d7 100%);
	background-size: 200%;
	height: 100%;
	animation: gradientMove 30s ease infinite;
}


@-webkit-keyframes gradientMove {
	0% {
		background-position: 0% 0%
	}
	50% {
		background-position: 100% 100%
	}
	100% {
		background-position: 0% 0%
	}
}
/*
@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
} */

.invalid-feedback {
  color: pink;
}


.scene {
  width: 25%;
	min-width: 300px;
  /* height: 560px; */
  /* border: 1px solid #CCC; */
  /* margin: 40px 0; */
  perspective: 600px;
}

.logincard{
  width: 100%;
  height: 100%;
  background-color:rgba(52,58,64,0.6);
  border-radius:10px;
  margin-top:-20%;
  transition: transform 0.7s;
  transform-style: preserve-3d;
  /* cursor: pointer; */
  position: relative;
/*  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; */
}

.is-flipped {
  transform: rotateY(-180deg) /* translateZ(1px)*/;
}

.card_face {
  position: absolute;
  width: 100%;
  height: 100%;
  /* line-height: 260px; */
  /* color: white; */
  /* text-align: center; */
  /* font-weight: bold; */
  /* font-size: 40px; */
  transform: rotateY(-180deg) translateZ(-1px)
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card_face_front {
    width: 100%;
    transform:translateZ(1px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
}

.card_face_back {
    width: 100%;
    top: 0;
    transform: rotateY(180deg) translateZ(1px);
    position: absolute;
    /*background-color:rgba(52,58,64,0.6); */
    border-radius:10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
}