@font-face {
	font-family: 'Roboto Condensed';
	src: url('/fonts/roboto-condensed/regular/robotocondensed-regular-webfont.eot');
	src: /*url('/fonts/roboto-condensed/regular/robotocondensed-regular-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), */
		url('/fonts/roboto-condensed/regular/robotocondensed-regular-webfont.woff2') format('woff2'), 
		/*url('/fonts/roboto-condensed/regular/robotocondensed-regular-webfont.woff') format('woff'), */
		url('/fonts/roboto-condensed/regular/robotocondensed-regular-webfont.ttf') format('truetype'), 
		url('/fonts/roboto-condensed/regular/robotocondensed-regular-webfont.svg?#robotocondensedregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('/fonts/roboto-condensed/bold/robotocondensed-bold-webfont.eot');
	src: /*url('/fonts/roboto-condensed/bold/robotocondensed-bold-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), */
		url('/fonts/roboto-condensed/bold/robotocondensed-bold-webfont.woff2') format('woff2'), 
		/*url('/fonts/roboto-condensed/bold/robotocondensed-bold-webfont.woff') format('woff'), */
		url('/fonts/roboto-condensed/bold/robotocondensed-bold-webfont.ttf') format('truetype'), 
		url('/fonts/roboto-condensed/bold/robotocondensed-bold-webfont.svg?#robotocondensedregular') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('/fonts/roboto-condensed/light/robotocondensed-light-webfont.eot');
	src: /*url('/fonts/roboto-condensed/light/robotocondensed-light-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), */
		url('/fonts/roboto-condensed/light/robotocondensed-light-webfont.woff2') format('woff2'), 
		/*url('/fonts/roboto-condensed/light/robotocondensed-light-webfont.woff') format('woff'), */
		url('/fonts/roboto-condensed/light/robotocondensed-light-webfont.ttf') format('truetype'), 
		url('/fonts/roboto-condensed/light/robotocondensed-light-webfont.svg?#robotocondensedregular') format('svg');
	font-weight: 300;
	font-style: normal;
}

body {
	background-color: #699;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	color:#222; 
}
span.bold {
    font-weight: 700;
}
.intro {
	position: relative;
	text-align: center;
	color: #fff;
	margin-top: 3.5em;
}
.intro p {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.285714285714286em;
	font-weight: 300;
}
h1 {
    text-align: center;
	color: #EEEFF1;
	font-size: 8.285714285714286em;
	line-height: 1.3;
	margin-top: 0.5172413793103448em;
	margin-bottom: 0.5172413793103448em;
	text-transform: uppercase;	
	letter-spacing: 0.08em;
	font-weight: 300;
}
h1 small { color: #EEEFF1; }
.form {
	width: 40%; 
	margin: 0 auto; 
	background: #eeeff1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
}
.login { padding: 0 2em; }
.login span.un {
	width: 10%; 
	text-align: center; 
	font-size: 1.2em;
	color: #699; 
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.text {
	background:#fff; 
	width:90%; 
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;	
	padding-left: 1em;
	border: none; 
	outline: none; 
} 
.text, .login span.un {
	display: inline-block; 
	vertical-align: top; 
	height: 40px; 
	line-height: 40px; 
	background:#fff;
}
ul li {
	height: 40px; 
	margin: 1em 0; 
	list-style: none;
}
ul { padding: 2em; }
.login input[type="submit"] {
	height: 40px; 
	border: none; 
	background: #699; 
	width: 100%; 
	outline: none; 
	font-size: 1.5em; 
	font-weight: bold; 
	color:#eee; 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor:pointer;
}
input[type="submit"]:hover {
    background-color: #1abc9c;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.footer {
    text-align: center;
    margin-top: 4.5em;
}
.footer p {
    color: #EEEFF1;
}
.footer a {
    color: #EEEFF1;
    text-decoration: none;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
}
.footer a:hover {
    color: #000;
    text-decoration: underline;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

@media (max-width:1920px) {

}
@media (max-width:1680px) {

}
@media (max-width:1600px) {

}
@media (max-width:1440px) {

}
@media (max-width:1366px) {
	.form { max-width: 500px; }
}
@media (max-width:1280px) {
	.form { width: 35%; }
}
@media (max-width:1200px) {
	.form { width: 38%; }
}
@media (max-width:1080px) {
	.form { width: 42%; }
}
@media (max-width:1050px) {

}
@media (max-width:1024px) {
	.form { width: 44%; }
}
@media (max-width:991px) {

}
@media (max-width:966px) {
	.form { width: 47%; }
	h1 { font-size: 4.5em; }
}
@media (max-width:900px) {

}
@media (max-width:853px) {
	.form { width: 53%; }
}
@media (max-width:800px) {

}
@media (max-width:768px) {
	.form { width: 59%; }
}
@media (max-width:736px) {

}
@media (max-width:667px) {

}
@media (max-width:640px) {
	.form { width: 71%; }
	ul { padding: 1em; }
	.login { padding: 0 1em; }
	.intro { margin-top: 1.5em; }
	.intro p { font-size: 1em; }
}
@media (max-width:603px) {

}
@media (max-width:600px) {
	h1 { font-size: 4em; }
	.form { width: 76%; }
}
@media (max-width:568px) {
	.form { width: 80%; }
}
@media (max-width:533px) {
	.form { width: 85%; }
}
@media (max-width:414px) {
	.form { width: 90%; }
	.login span.un { width: 15%; }
	.text { width: 85%; }
}
@media (max-width:384px) {
	h1 { font-size: 3em; }
}
@media (max-width:360px) {
	.login span.un { display: none; }
	.text {
		width: 100%; 
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	.intro { margin-top: 1em; }
	.intro p { font-size: 0.75em; }
}
@media (max-width:320px) {

}
@media (max-width:240px) {
	h1 { font-size: 2em; margin-bottom: 0.5em; margin-top: 0.75em; }
	.footer { margin-top: 2em; font-size: 0.75em; }
}