body {
	/*background-image: url(fundo.gif);*/
	background-color: #F0F4F5;
}

.grupologin {
	position: fixed;
	right: calc(50% - 155px);
	top: calc(50% - 225px);
	height: 450px;
	width: 310px;
	background: white;
	z-index: 3;
	border-radius: 8px;
	/*box-shadow: -4px 0px 18px rgba(8,81,120,0.5);*/
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	animation-name: flipInX;
	animation-duration: 0.8s;
	transition: 0.4s ease-in-out;
}

/*
img.logoimg {
	left: calc(50% - 68.5px);
	position: relative;
	padding: 68px 0px 50px 0;
}*/

img.logoimg {
	left: calc(50% - 125px);
	position: relative;
	padding: 68px 0px 50px 0;
}

.formlogin {
	width:calc(100% - 50px);
	margin:auto;
}

.inputlogin {
	height: 30px;
	width:100%;
	border-radius:2px;
	border: 1px solid #C6D5DB;
	margin: 10px 0;
	/*box-shadow: 1px 1px 3px rgba(8,81,120,0.45);*/
	box-sizing: border-box;
	padding: 2px 2px 2px 10px;
	}

button.inputlogin {
	background: #63D391;
	color:#fff;
	cursor:pointer;
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 30deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 30deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -4deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 1deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 1deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}