@CHARSET "UTF-8";
.preload { opacity: 0; position: absolute; top: -9999px; left: -9999px; } 
body {
background:url(../images/fondo.png) no-repeat center center fixed;
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover;
transition:background 3s;
-webkit-transition:background 3s;
-moz-transition:background 3s;
-o-transition:background 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
overflow:hidden;
}
.progress-bar {color:#333;} 
message1{}
@media screen and (max-width: 320px) {
html, body {margin:0; height:100%; overflow:hidden}
/*body { width:100%; height:530px; background-color:#1b2a41;}*/
/*body { background: url(../images/fondo.png) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-color:transparent;} */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none;}
.form-control{ position:relative; font-size:12px; width:150px; height:auto; padding:5px; @include box-sizing(border-box); &:focus{ z-index: 2;}}
form[role=login] { color:#5d5d5d; background:transparent; padding:5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } 
form[role=login] input{ font-size:12px; margin:5px 0; }  
form[role=login] button{ font-size:12px; margin:5px 0;  width:150px;} 
form[role=login] > div { text-align: center; } 

.container{
	width:100%;
	border:none;
}

.login-form {
	display:inline; 
	float:left;
	width:160px; 
	height:50px; 
	text-decoration:none; 
	border:none;
}


.field-icon {
	width:20px;
	float: right;
	margin-right:15px;
	margin-top: -32px;
	position: relative;
	z-index: 2;
	cursor:pointer;
}
}



@media screen and (min-width: 321px) and (max-width: 360px) {
/*html {min-width:320px; max-width:360px; overflow: hidden;}*/
html, body {margin: 0; height: 100%; overflow: hidden}
/*body { background: url(../images/fondo.png) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-color:transparent;} */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none;}
.form-control{ position:relative; font-size:12px; width:150px; height:40px; padding:5px; @include box-sizing(border-box); &:focus{ z-index: 2;}}
form[role=login] {color: #5d5d5d; background:transparent; padding:5px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } 
/*form[role=login] img { display:block; margin:0 auto; margin-bottom:35px; } */
form[role=login] input{ font-size:12px; margin:5px 0; } 
form[role=login] button{ font-size:12px; margin:5px 0; width:150px; } 
form[role=login] > div {text-align:left; } 

.container{
	width:100%;
	border:none;;
}

.login-form {
	display:block; 
	width:150px;
	float:left;
	height:50px; 
	text-decoration:none; 
	border:none;
}

.field-icon {
	width:20px;
	float: right;
	margin-right:5px;
	margin-top:-32px;
	position: relative;
	z-index: 2;
	cursor:pointer;
}
}


@media screen and (min-width: 361px) and  (max-width: 640px) {
/*html { min-width:320px; max-width:640px;}*/
html, body {margin: 0; height: 100%; overflow: hidden}
/*body { background: url(../images/fondo.png) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-color:transparent;} */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:12px; width:150px; height:40px; padding:5px; @include box-sizing(border-box); &:focus{ z-index: 2;}}
form[role=login] { color:#5d5d5d; background:transparent; padding:5px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } 
form[role=login] input{ font-size:12px; margin:5px 0; width:150px; }  
form[role=login] button{ font-size:12px; margin:5px 0; width:150px;} 
form[role=login] > div { text-align:left; } 
.container{
	width:100%;
	border:none;
}

.login-form {
	display:inline; 
	float:left;
	width:150px; 
	height:40px; 
	text-decoration:none; 
	border:none;
}

.field-icon {
	width:20px;
	float: right;
	margin-right:5px;
	margin-top: -32px;
	position: relative;
	z-index: 2;
	cursor:pointer;
} 
}

@media screen and (min-width: 641px) and (max-width: 1000px) {
html { min-width:641px; max-width:1000px;}
/*body { background: url(../images/fondo.png) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-color:transparent;} */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ font-size:16px; width:200px; height:40px; padding:5px; @include box-sizing(border-box); &:focus { z-index: 2; }
}
form[role=login] { color:#5d5d5d; background:transparent; padding:2px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } 
form[role=login] img { display: block; margin: 0 auto; margin-bottom: 35px; } 
form[role=login] input { font-size: 12px; margin:5px 0;}  
form[role=login] button { font-size: 12px; margin:5px 0; width:200px;} 
form[role=login] > div { text-align: left; }
.container{
	width:100%;
	border:none;
}

.login-form {
	display:inline; 
	float:left;
	width:200px; 
	height:50px; 
	text-decoration:none; 
	border:none;

}
.field-icon {
	width:20px;
	float:right;
	margin-right:15px;
	margin-top:-30px;
	position:relative;
	z-index:2;
	cursor:pointer;
}
}

@media screen and (min-width: 1001px){
html { min-width:1001px; max-width:1920px;}
/*body { background: url(../images/fondo.png) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-color:transparent;} */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ font-size:16px; width:200px; height:40px; padding:5px; @include box-sizing(border-box); &:focus { z-index: 2; }
}
form[role=login] { color:#5d5d5d; background:transparent; padding:2px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; } 
form[role=login] input { font-size:12px; margin:5px 0;}  
form[role=login] button { font-size:12px; margin:5px 0; width:200px;} 
form[role=login] > div { text-align:left; } 
.container{
	width:100%;
	border:none;
}

.login-form {
	display:inline; 
	float:left;
	width:200px; 
	height:50px; 
	text-decoration:none; 
	border:none;
	z-index:2;
}

.field-icon {
	width:20px;
	float:right;
	margin-right:15px;
	margin-top:-30px;
	position:relative;
	z-index:2;
	cursor:pointer;
}

}