body {
	font-family: Arial,Helvetica,sans-serif;
	background-color: black;
}
.bg
{
	position: fixed;
	left:     0px;
	top:      0px;
	width:	100%;
	height: 100%;
	background-color: #f7593c;
	background-image: linear-gradient(#6b265f, #f7593c);
}
.box {
	position: absolute;
	width:580px;
	height:240px;                   
	top: 50%;
	left: 50%;
	margin-top: -120px;
	margin-left: -290px;
	background-color: rgba(0,0,0,0.3);
	border: 0px solid #fff;
	-webkit-border-radius: 1.0em;
	-moz-border-radius: 1.0em;
	border-radius: 1.0em;
	display: none;
}
.data {
	width: 500px;
	margin: 0 auto 0 auto;
	padding-top: 2.0em;
	color: #fff100;
	text-align: center;
}
label {
    font: 1.5em sans-serif;
}
input {
    width: 500px;
	height: 60px;
	margin: 0 auto 0 auto;
    padding: 0em;
    border: 0px solid #fff;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	border-radius: 0.2em;
    background: rgb(255,255,50,0.7);
    color: #a71254;
    font: 2.5em sans-serif;
    text-align: center;
}
.button {
	padding: 0.5em 1.0em;
	margin: 1.0em auto 0 auto;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	border: 0px solid #000;
	background: rgba(255,255,150,0.7);
	color: #a71254;
	font: bold 2.0em sans-serif;
	text-decoration: none;
	vertical-align: middle;
}
.button:hover {
	background: rgba(255,255,150,0.9);
	color: #db0766;
}
.button:active {
	background: rgba(255,255,150,0.9);
}	
@media screen and (max-width: 599px){
	.box {
		width:300px;
		height:150px;   
		margin-top: -75px;
		margin-left: -150px;
	}
	.data {		
		margin: 0 0 0 auto;
		width: 300px;
		padding-top: 1.0em;
	}
	label {
	    font: 1.0em sans-serif;
	}
	input {
	 	width: 280px;
	 	height: 40px;
	 	margin: 0 auto 0 auto;
	 	font: 1.8em sans-serif;
	}
	.button {
		margin: 0.7em auto 0 auto;
		padding: 0.3em 0.6em;;
		-webkit-border-radius: 0.3em;
		-moz-border-radius: 0.3em;
		border-radius: 0.3em;
		font: bold 1.6em sans-serif;
	}
}