/******************************************/
/*              PAGE FORMATS              */
/******************************************/
body {
	background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url('/assets/img/backgrounds/login-bg-01.jpg');
	background-size: cover;
	background-repeat: none;
	/*overflow: hidden !important;*/
	height: 100vh;
}

.container { width: 600px; }

.fixed-bottom {
	position: fixed;
	bottom: 5px;
	right: 50%;
	transform: translateX(50%);
}

.screen { text-align: center; }
/******************************************/
/*              END PAGE FORMATS          */
/******************************************/


/******************************************/
/*              FORM FORMATS              */
/******************************************/

input {
	width: 60%;
	/*padding-left: 10px;*/
	font-size: 110%;
	margin-top: 10px;
	margin-bottom: 10px;
	background: transparent;
	color: white;
	border: none;
	border-bottom: 1px solid white;
}

input:focus { outline: none; padding-left: 10px;}

input:-webkit-autofill {
	background-color: transparent;
	/*-webkit-box-shadow: 0 0 0 1000px transparent inset !important;*/
		/*-webkit-text-fill-color:  white !important;*/
}

.form-input {
	position: relative;
	display: flex;
	justify-content: center;
}

.form-input .eye {
	width: 20px;
	margin-block: 10px;
	background: url("../img/hide-pass.svg") no-repeat center/contain;
	border-bottom: 1px solid white;
	cursor: pointer;
}

.form-input .eye.show {
	background-image: url("../img/show-pass.svg");
}

::-webkit-input-placeholder { color: white; }

:-moz-placeholder      { color: white; }
::-moz-placeholder     { color: white; }
:-ms-input-placeholder { color: white }

.screen-btn {
	font-size: 125%;
	font-weight: 500;
	text-shadow: 0 0 10px black;
	width: 60%;
	border: none;
	padding: 5px;
	border-radius: 20px;
	background: linear-gradient(to left, #34c3e8, #30c774);
}


a.btn, button.submit-btn {
	border-radius: 75px !important;
	margin: 10px;
}

#login-btn { margin: 15px 0 15px 0; }

#email-input { 	border-bottom: 1px solid black;}


#email-input:-moz-placeholder, #email-input::-webkit-input-placeholder, #email-input:-ms-input-placeholder {
	color: black !important;
}

button:hover {
	box-shadow: inset 0 0 5px #3071A9;
}

button.submit-btn {
	background: #d9534f;
	color: white !important;
}

button.submit-btn:hover {
	opacity: .75 !important;
}

.facebook-btn {
	background: #3b5998 !important;
	font-size: 100%;
}

.google-btn {
	background: white !important;
    color: black !important;
    text-shadow: 0 0 black !important;
}

.or-line { margin: 30px 0 20px 0; }
#forgot-password:hover { color: white; }
/******************************************/
/*              END FORM FORMATS          */
/******************************************/


/******************************************/
/*              Voucher CSS               */
/******************************************/
#redeem-voucher-screen {
	/* transform: translateY(25%); */
	margin-top: 30px;
	padding: 30px;
	/*background:  #fcce54;*/
	background-color: white;
	box-shadow: 0 0 5px rgba(255, 255, 255, .3);
}

#redeem-voucher-screen > button:hover {
	box-shadow: inset 0 0 10px white !important;
}
.download-links {
	margin: 30px;
}
.download-links:hover {
	opacity: .60;
}
#result-screen .note {
	color: white;
}
/*captcha */
div.g-recaptcha {
	width: 60%;
	margin: auto;
	padding: 20px;
}


/******************************************/
/*              MEDIA QUERIES             */
/******************************************/

@media (max-width: 415px) {
	.container              { width: 350px; }
	.or-line, button, input { width: 90% !important; }
	img                     { width: 75%; }
	.g-recaptcha {
		width: 100%;
		/*margin-right: 5% !important;*/
		padding: 10px;
	}
	img { width: 50%;}
	#redeem-voucher-screen {
		padding: 10px;
	}
	#redeem-voucher-screen > img { width: 50%;}
	h3 { font-size: 80%;}
	.container {padding: 2px;}

}