@font-face {
	font-family: 'Helvetica Neue';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('../fonts/helveticaneue/HelveticaNeue-Roman.woff') format('woff');
}
@font-face {
	font-family: 'Helvetica Neue';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('../fonts/helveticaneue/HelveticaNeue-Bold.otf') format('woff');
}

html, body, td, textarea, * {
    font-family: 'Helvetica Neue';
    font-size: 1em;
}

html, body {
	background: #EEE;
	height: 100%;
}

body {
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: transparent;
}

html {
	background-image: url(../backgrounds/coverpic3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

@media all and (min-width: 768px) {
	html {
		background-image: url(../backgrounds/coverpic3-small.jpg);
	}
}

.home-logo {
	display: block;
    font-size: 19px;
    color: black;
    background: url(../icons/logo.svg) no-repeat;
    background-size: auto 100%;
}

body > header {
	justify-content: center;
}

body > header > .home-logo,
body > header > .home-logo ~ * {
	display: none;
}

main .home-logo {
	margin: 5px auto 0 80px;
}

main {
	width: 100%;
}

form[data-action="login"] {
	padding: 20px;
}

body > header, .main-output {
	background: none;
}

.main-output {
	padding: 20px;
}

@media all and (min-width: 640px) {
	main {
		width: 480px;
		max-width: 100%;
	}

	form[data-action="login"] {
		border: solid 1px #DDD;
		border-radius: 10px;
	}
}

.home-logo {
	height: 63px;
	width: 299px;
	margin: 5px auto 0 0;
}

.login {
	Xbackground-color: white;
}

.login form {
	background-color: white;
}

		.login header {
			padding-top: 10px;
			padding-bottom: 40px;
		}
		.login .logo {
			display: block;
			width: 140px;
			height: 80px;
			margin: 0 auto;
			background: url(../icons/logo.png) no-repeat center;
		}
		.login main {
			padding: 0 18px 0 21px;
		}
		.login h1 {
margin: 0;

font-size: 38px;
color: #333d4d;

font-weight: bold;
text-align: center;
		}
		.password input[type="email"],
		.login input[type="email"],
		.login input[type="text"],
		.login input[type="password"] {
			display: block;
			margin: 8px auto 15px;
			border: solid 1px rgb(223,223,223);

width: 100%;
height: 65px;
border-radius: 8px;
box-shadow: 0.927px 2.853px 8px rgba(223,223,223,0.5);
background-color: #ffffff;

font-size: 21px;
color: #9b9b9b;

text-indent: 22px;
		}
		.login input[type="text"]::placeholder,
		.login input[type="email"]::placeholder,
		.login input[type="password"]::placeholder {
color: #bbb;
		}

		.login button {
			display: block;
			margin: 12px auto 12px;
			border: none;

width: 100%;
height: 62px;
border-radius: 8px;
background-color: #0e54d0;

/*width: 66px;
height: 27px;*/
font-size: 23px;
color: #ffffff;

font-weight: bold;
text-align: center;
		}
		.login .forgot {
			text-decoration: none;

font-size: 18px;
color: #9b9b9b;

display: block;
margin: 0 auto;
text-align: center;
		}
		.login .social-login {
			margin: 70px 0 40px;
			display: flex;
			justify-content: center;
		}
		.login .social-login a:first-child {
			margin-right: 10px;
		}
		.login .social-login a {
			display: block;
			flex: 0 0 80px;
			padding-left: 48px;
			padding-bottom: 3px;

font-size: 12px;
line-height: 17px;
color: #44505c;

		}
		.login .facebook-login {
			background: url(../icons/fb.png) no-repeat center left;
		}
		.login .google-login {
			background: url(../icons/google.png) no-repeat center left;
		}

		.login .alternative,
		.login .signup {
			display: block;
			margin: 0 auto;

line-height: 41px;
color: #9b9b9b;

text-align: center;
		}
		.login .alternative {
font-size: 21px;

		}
		.login .signup {
font-size: 26px;
		}
		.login {
		}
		.login footer {
			display: flex;
		}
		.login footer a {
			flex: 0 0 50%;
			display: block;

line-height: 72px;
height: 72px;
background-color: #5dd9af;

font-size: 18px;
color: #ffffff;

text-align: center;
		}
		.login footer a.current {

background-color: #51c39d;
font-size: 19px;
		}



.main-information.login {
	background: white;
	flex-direction: column;
	padding: 10px 0 30px;
}

.main-information.login p {
	text-align: center;
}

.main-information.login p + p {
	font-size: 0.75em;
	margin-top: 20px;
	color: #888;
}


@media all and (max-width: 579px) {
	main .home-logo {
		width: 72px;
		min-width: 72px;
		overflow: hidden;
		margin: 60px auto 0;
	}
}







.password {
	Xbackground-color: white;
}
.password form {
	background-color: white;
}

		.password header {
			padding-top: 10px;
			padding-bottom: 40px;
		}
		.password .logo {
			display: block;
			width: 140px;
			height: 80px;
			margin: 0 auto;
			background: url(public/assets/icons/survey/logo.png) no-repeat center;
		}
		.password main {
			padding: 0 18px 0 21px;
		}
		.password h1 {
margin: 0;

font-size: 38px;
color: #333d4d;

font-weight: bold;
text-align: center;
		}
		.password input[type="text"],
		.password input[type="password"] {
			display: block;
			margin: 8px auto 15px;
			border: solid 1px rgb(223,223,223);

width: 100%;
height: 65px;
border-radius: 8px;
box-shadow: 0.927px 2.853px 8px rgba(223,223,223,0.5);
background-color: #ffffff;

font-size: 21px;
color: #9b9b9b;

text-indent: 22px;

box-sizing: border-box;
		}
		.password input[type="text"]::placeholder,
		.password input[type="email"]::placeholder,
		.password input[type="password"]::placeholder {
color: #bbb;
		}

		.password button:not([hidden]) {
			display: block;
			margin: 12px auto 12px;
			border: none;

width: 100%;
height: 62px;
border-radius: 8px;
background-color: #0e54d0;

/*width: 66px;
height: 27px;*/
font-size: 23px;
color: #ffffff;

font-weight: bold;
text-align: center;
		}
		.password .forgot {
			text-decoration: none;

font-size: 18px;
color: #9b9b9b;

text-align: center;
		}


.main-information.password {
	background: white;
	flex-direction: column;
	padding: 10px 0 30px;
}

.info-message,
.error-message {
	opacity: 1;
	display: block;
	transition: opacity 1s ease;
	text-align: center;
}
.error-message {
	color: red;
}
.info-message[hidden],
.error-message[hidden] {
	visibility: visible;
	opacity: 0;
}

.info-message {
	display: flex;
	flex-direction: column;
}

a[href="login"] {
	display: block;
	text-align: center;
}

.info-message a, a[href="login"] {
	margin-top: 10px;
	color: #0e54d0;
}

.password-field {
	position: relative;
	display: block;
}

.show-pass {
	position: absolute;
	right: 15px;
	top: 18px;
	z-index: 1;
}