body {
	background-color: #1BBC9B;
 font-family : 'Open sans', sans-serif;
	    color: #333;
    font-size: 13px;
    line-height: 1.6;
}
div.bold {
    font-weight: 700;
}
.intro {
	color: #fff;
    text-align: center;
	
}
.intro p {
	letter-spacing: 0.08em;
    font-size: 1.5em;
    font-weight: 500;
    color: #fff;
}
h1 {
    text-align: center;
    color: #fff;
    font-size: 60px;
    margin-top: 150px;
    /* margin-bottom: 1em; */
    text-transform: uppercase;
    /* letter-spacing: 0.08em; */
    font-weight: 500;
    line-height: 1.5;
}
.h1-color{    color: #c3ffbf;}
h1 small { color: #EEEFF1; }
h1.abbr { display: none; }
.form {
	    width: 40%;
    margin: 0 auto;
    background: rgba(238, 239, 241, 0.81);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* width: 380px; */
    padding: 20px;
    margin: 60px auto;
    /* background: #fff; */
    /* border-top: solid 2px #72c02c; */
}
.login { padding: 0 2em; }
.login span.un {
    width: 15%;
    text-align: center;
    font-size: 1.2em;
    color: #1BBC9B;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.text {
	background:#fff; 
	width:85%; 
	-webkit-border-top-left-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;	
	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: 20px 0px 0px 0px;
    list-style: none;
}
ul { padding: 2em; }
.login input[type="submit"] {
	    height: 40px;
    border: none;
    background: #1BBC9B;
    width: 100%;
    outline: none;
    font-size: 15px;
    /* font-weight: bold; */
    color: #eee;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background-color: #8a8a8a;
    -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) {
	h1 { font-size: 3.75em; }
}
@media (max-width:966px) {
	.form { width: 47%; }
	h1 { font-size: 3.5em; }
}
@media (max-width:900px) {

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

}
@media (max-width:768px) {
	.form { width: 59%; }
	h1 { font-size: 3em; }
}
@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: 2.75em; }
	h1 .version { font-size: 0.75em; }
	.form { width: 76%; }
}
@media (max-width:568px) {
	.form { width: 80%; }
}
@media (max-width:533px) {
	.form { width: 85%; }
	h1.full { display: none; }
	h1.abbr { display: block; }
	h1 { font-size: 6em; margin-bottom: 0.5em; margin-top: 0.75em; }
	h1 .version { font-size: 0.5em; }
}
@media (max-width:414px) {
	.form { width: 90%; }
	.login span.un { width: 15%; }
	.text { width: 85%; }
}
@media (max-width:384px) {
	h1 { font-size: 3em; }
	h1 { font-size: 5em; margin-bottom: 0.5em; margin-top: 0.75em; }
}
@media (max-width:360px) {
	.login span.un { display: none; }
	.text {
		width: 100%; 
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}
	.intro { margin-top: 1em; }
	.intro p { font-size: 0.75em; }
	h1 .version { font-size: 0.3em; }
}
@media (max-width:320px) {

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


@media (max-width:1920px) { /* 1080p */
}
@media (max-width:1680px) { /* iMac */
}
@media (max-width:1600px) { /* Medium 16:10 desktop/laptop screen resolution */
}
@media (max-width:1366px) { /* Small 16:9 desktop/laptop screen resolution */
}
@media (max-width:1280px) { /* 720p */
}
@media (max-width:1024px) { /* Standard netbook/tablet resolution */
}
@media (max-width:960px) { /* iPhone 4 */
}
@media (max-width:800px) { /* Very common mobile phone */
}
@media (max-width:640px) {
}
@media (max-width:480px) { /* iPhone 3 */
}
@media (max-width:320px) { /* Very common low res */
}
@media (max-width:240px) {
}