@import url('fonts.css');

/* ---- Common Rules ---- */

html, body {
    font-family: 'FFDINRoundPro-Medium', sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

.outerWrapper {
    margin: 0;
    width:100%;
    margin:0 auto;
    text-align:center;
    color:#777e8c;
    font-weight: normal;
    font-size:20px;
}

a:active,
a:hover,
{
    outline: 0
}

header img {
	width:100%;
}

.footer {
	margin-top: 2em;
	border-top: 1px solid #777e8c;
	font-size: 0.7em;
	padding-bottom: 2em;
}

.footer a {
	color: #777e8c;
	text-decoration: underline;
	display: block;
}
.footer a:hover {
	color: #777e8c;
	text-decoration: none;
}


.outer-wrapper {
	padding: 0.5em 3em 0.5em 3em;
	-webkit-transition:all 0.3s ease-in-out 0s;
	transition:all 0.3s ease-in-out 0s;
}

h1 {
	font-family: 'FFDINRoundPro-Medium', sans-serif;
	font-weight: normal;
}

.download-app a img {
	margin:20px 0px;
	width:45%;
}

.text-left {
	text-align: left;
}

.text-left h3 {
	margin-bottom:0;
}

.text-left p {
	margin-top:0;
}

ol li {
	padding:10px 0px;
}

/* ---- HTML Forms ---- */

form {
	margin-top:50px;
}

input[type="email"], input[type="password"] {
	border:none;
	width:100%;
	border-bottom:2px solid #a5acb9;
	font-size: 26px;
	font-family: 'FFDINRoundPro-Medium', sans-serif;
	text-align: center;
	padding:20px 0;
	outline: 0;
	margin-top:20px;
}

input[type="submit"] {
	margin-top:10%;
	width:100%;
	border:none;
	border-bottom:8px solid #c4c9d3;
	border-radius: 10px;
	font-size: 26px;
	font-family: 'FFDINRoundPro-Medium', sans-serif;
	font-weight:400;
	text-align: center;
	padding:20px 0;
	background: #dadde3;
	color:#ffffff;
	outline: 0;
	-webkit-appearance: none;
}

input[type="button"] {
	margin-top:10%;
	width:100%;
	border:none;
	border-bottom:8px solid #a00054;
	border-radius: 10px;
	font-size: 26px;
	font-family: 'FFDINRoundPro-Medium', sans-serif;
	font-weight:400;
	text-align: center;
	padding:20px 0;
	background: #cc0057;
	color:#ffffff;
	outline: 0;
	-webkit-appearance: none;
}

input[type="email"]:active, input[type="password"]:focus {
	border-bottom:2px solid #1cc5bf;
}

::-webkit-input-placeholder {
	text-align: center;
	color: #b1b1b1;
}

:-moz-placeholder {
	text-align: center;
	color: #b1b1b1;
}

::-moz-placeholder {
	text-align: center;
	color: #b1b1b1;
}

:-ms-input-placeholder {
	text-align: center;
	color: #b1b1b1;
}

.alert-danger {
	font-size: 22px;
	color:#ff001f;
	padding:15px 0;
	height:50px;
}

/* ---- Media Queries ---- */

@media(max-width: 320px) {
	h1 {
		font-size:26px !important;
		margin:10px 0px 0px 0px !important;
	}
	input[type="email"], input[type="password"]  {
		font-size: 15px !important;
		padding:10px 0 !important;
		margin-top:5px !important;
	}
	.alert-danger {
		height:25px !important;
		font-size: 15px !important;
		padding-bottom:0px !important;
	}
}

@media(max-width: 420px) {
	body {
	    font-size:16px !important;
	}
	h1 {
		font-size:28px;
		margin:15px;
	}
	form {
		margin-top:0px;
	}
	input[type="email"], input[type="password"]  {
		font-size: 20px;
		padding:15px 0;
		margin-top:10px;
	}
	.alert-danger {
		padding:10px 0;
		height:40px;
		font-size: 18px;
	}
	input[type="submit"], input[type="button"] {
		margin-top:10px !important;
		font-size: 18px !important;
		padding:10px 0 !important;
	}
	.outer-wrapper {
		padding:5px 20px !important;
	}
}

@media(max-width: 768px) {
	body {
	    font-size:19px;
	}
	.outer-wrapper {
		padding:5px 30px;
	}
	input[type="submit"], input[type="button"] {
		margin-top:60px;
		font-size: 28px;
		padding:25px 0;
	}
}

@media(min-width: 768px) {
	html, body {
		background: #e1e1e1;
	}
	.footer {
		border-top: none;
		margin-top: 2em;
		padding-bottom: 1em;
	}
	.footer a {
		display: inline-block;
		margin-right: 1em;
	}

	.outerWrapper {
		width:768px;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		border-radius:10px;

	}
}