body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-moz-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
   /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}
input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:none;
}
input:focus {
    outline: none;
}
input:focus + .inp
{
	opacity: 1;
}

.inp {
	opacity: .4;
	color: white;
}
.bungkus-login input{
	background:none;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: solid thin rgba(255,255,255,0.6);	
	padding: 10px;
	color: white;
	width: 100%;
	font-size: 12pt;
}
.back-blur{
width: 100%;
height: 245px; 
position: absolute;top:30%;
right: 0;
left: 0;
margin: 0 auto;
padding: 20px;
background-color: rgba(255,255,255,0.2);
backdrop-filter:blur(10px);
border: solid thin  rgba(255,255,255,0.2);
}
.judul{
  	font-size: 20pt;
  	margin-bottom: 10px;
}
.judul small{
  	font-size: 15pt;	
}
.putih{
	color: white;
}
@media only screen and (max-width: 767px) {
.judul{
 	font-size: 20pt;
}
.judul small{
  	font-size: 12pt;	
}
.back-blur{
width: 100%;

}