.progress-bar {color:#333;} 
message1{}
.bgGrey{content:"";position:fixed;left:0;right:0;bottom:0;top:0;z-index:-1;background-size:cover;overflow:hidden;display:block;background-color:rgba(255,255,255,1);}
.bgNormal{content:"";position:fixed;left:0;right:0;bottom:0;top:0;z-index:-2;background-size:cover;overflow:hidden;display:block;background-color:rgba(255,255,255,1);}
.form-links a, .form-links a:active, .form-links a:focus {color:#CCCCCC; border:none; -moz-outline-style:none; text-decoration:none;}
.enlace_bajo_form a, .enlace_bajo_form a:active, .enlace_bajo_form a:focus {color:#000000; border:none; -moz-outline-style:none; text-decoration:none;}




.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:16px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:16px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input { font-size: 18px; margin:4px 10px; }
form[role=login] button { font-size: 18px; margin:4px 10px; width:250px; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:10px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}












@media screen and (max-width: 320px) and (orientation : portrait){
html {min-width:280px; max-width:320px;}
body {width:100%; height:auto; background-color:#FFFFFF; overflow:auto;	overflow-x: hidden;	overflow-y: hidden;}

.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; } 
.form-control{ position:relative; font-size:12px; width:100%; height:auto; margin:0 auto auto; padding:10px; @include box-sizing(border-box); &:focus { z-index:2;} }
 
form[role=login] { color: #5d5d5d; background: #bfbaba; padding:6px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:205px; height:100px; text-align:center; border:none; } 
form[role=login] input { font-size:14px; margin:10px 0; }
form[role=login] button { font-size:14px; margin:10px 0; } 
form[role=login] > div { text-align: center; } 
/*.form-links {text-align:center; margin-top:1em; margin-bottom:20px;} */

.login-form {
	position:relative; 
	width:210px; 
	height:300px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;	
}

#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 190px;
	left:180px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}

@media screen and (max-width: 320px) and (orientation : landscape){
html {min-width:280px; max-width:320px;}
body {width:100%; height:auto; background-color:#FFFFFF; overflow:auto;	overflow-x: hidden;	overflow-y: hidden;}

.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; } 
.form-control{position:relative; font-size:12px; width:100%; height:auto; margin:0 auto auto; padding:5px; @include box-sizing(border-box); &:focus { z-index:2;}}
 
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:5px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:205px; height:100px; text-align:center; border:none; } 
form[role=login] input { font-size:12px; margin:5px 0; width:198px; height:30px;}
form[role=login] button { font-size:12px; margin:5px 0; width:198px; height:30px; line-height:10px; }  
form[role=login] > div { text-align: center; } 
.form-links {text-align:center; margin-top:1em; margin-bottom:20px;} 

.login-form {
	position:relative; 
	width:210px; 
	height:220px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 190px;
	left:180px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}

@media screen and (min-width: 321px) and (max-width: 360px) and (orientation : portrait){
html {min-width:341px; max-width:360px;}
body {width:100%; height:auto; background-color:#FFFFFF; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; } 
.form-control{ position:relative; font-size:12px; width:198px; height:30px; padding:5px; @include box-sizing(border-box); &:focus { z-index:2;} }
 
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:26px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:15px; width:205px; height:100px; text-align:center; border:none; } 
form[role=login] input { font-size: 14px; margin:5px 0; width:198px; height:30px;} 
form[role=login] button { font-size: 14px; margin:5px 0; width:198px; height:40px;} 
form[role=login] > div { text-align: center; } 
.form-links { text-align: center; margin-top: 1em; margin-bottom:20px; } 

.login-form {
	position:relative; 
	width:250px; 
	height:360px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}

#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 190px;
	left:180px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}


@media screen and (min-width: 321px) and (max-width: 360px) and (orientation : landscape){
html {min-width:341px; max-width:360px;}
body {width:100%; height:500px; background-color:#FFFFFF; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; } 
.form-control{ position:relative; font-size:14px; width:198px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index:2;} }
 
form[role=login] {color:#5d5d5d; background:#bfbaba; padding:10px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display:block; margin: 0 auto; margin-bottom:5px; width:240px; height:100px; text-align:center; border:none;} 
form[role=login] input { font-size: 16px; margin:6px 0; width:226px; height:30px; line-height:10px;}
form[role=login] button { font-size: 16px; margin:6px 0; width:226px; height:30px; line-height:10px;} 
form[role=login] > div { text-align: center; } 
.form-links { text-align: center; margin-top: 1em; margin-bottom:20px; } 

.login-form {
	position:relative; 
	width:250px; 
	height:260px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}

#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 190px;
	left:180px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}




@media screen and (min-width: 361px)  and (max-width: 640px) and (orientation : landscape) {
html {min-width:598px; max-width:640px;}
body {width:100%; height:500px; background-color:#FFFFFF; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; } 
.form-control{ position:relative; font-size:12px; width:230px; height:auto; padding:5px; @include box-sizing(border-box); &:focus { z-index:2;} }
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:6px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display:block; margin: 0 auto; margin-bottom:5px; width:248px; height:100px; text-align:center; border:none;}  
form[role=login] input{font-size:12px; margin:4px 10px; width:248px; height:30px;} 
form[role=login] button {font-size:12px; margin:4px 10px; width:248px; height:30px; line-height:10px;} 
form[role=login] > div { text-align: center; vertical-align:middle; } 
.form-links { text-align: center; margin-top: 1em; margin-bottom:10px; } 

.login-form {
	position:relative; 
	width:280px; 
	height:260px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}

#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 190px;
	left:180px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}

@media screen and (min-width: 361px) and (max-width: 640px) and (orientation : portrait) {
html {min-width:361px; max-width:640px;}
body {background:url(../images/fondo_360.png) no-repeat center center fixed; width:100%; height:500px; background-color:#222222; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; } 
.form-control{ position:relative; font-size:12px; width:190px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index:2;} }
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:26px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:15px; width:328px; height:100px; text-align:center; border:none;} 
form[role=login] input, form[role=login] button { font-size: 16px; margin:10px 0; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align: center; margin-top: 1em; margin-bottom: 50px;  border:#FF3300 1px solid;} 


.login-form {
	position:relative; 
	width:240px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}

#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 190px;
	left:180px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}  
}

@media screen and (min-width: 641px) and (max-width: 800px) and (orientation : portrait){
html { min-width:641px; max-width:800px; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
body { background-color:#222222;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:14px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:26px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:15px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input, form[role=login] button { font-size: 18px; margin: 16px 0; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:50px;} 
.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
} 
}

@media screen and (min-width: 801px) and (max-width: 1024px) and (orientation : portrait) {
html { min-width:641px; max-width:1024px;}
body {background-color:#222222; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:14px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:26px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:15px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input, form[role=login] button { font-size: 18px; margin: 16px 0; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:50px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
} 
}
@media screen and (min-width: 641px) and (max-width: 800px) and (orientation : landscape){
html { min-width:641px; max-width:800px;}
body { background-color:#222222; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:14px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2;}}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:10px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input { font-size:16px; margin:4px 10px; width:258px; height:30px; line-height:10px; }
form[role=login] button { font-size:16px; margin:4px 10px; width:258px; height:30px; line-height:10px;}  
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:50px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:260px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
} 
}
@media screen and (min-width: 801px) and (max-width: 1024px) and (orientation : landscape) {
html { min-width:801px; max-width:1024px;}
body {background-color:#222222; overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:14px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:16px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:250px; height:100px; text-align:center; border:none; } 
form[role=login] input { font-size: 18px; margin:4px 10px; } 
form[role=login] button { font-size: 18px; margin:4px 10px; width:250px; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:50px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye1.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
} 
}

@media screen and (min-width: 1025px) and (max-width: 1280px) and (orientation : portrait){
html { min-width:1025px; max-width:1280px;}
body {background-color:#222222;  overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:16px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:26px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:15px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input, form[role=login] button { font-size: 18px; margin: 16px 0; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:10px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye4.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}

@media screen and (min-width: 1025px) and (max-width: 1280px) and (orientation : landscape){
html { min-width:1025px; max-width:1280px;}
body {background-color:#222222;  overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:16px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:16px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input { font-size: 18px; margin:4px 10px; }
form[role=login] button { font-size: 18px; margin:4px 10px; width:250px; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:10px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye4.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}


@media screen and (min-width: 1281px) and (orientation : portrait){
html { min-width:1281px; max-width:1920px;}
body {background-color:#222222;  overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:16px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:26px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:15px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input, form[role=login] button { font-size: 18px; margin: 16px 0; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:10px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye4.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}

@media screen and (min-width: 1281px) and (orientation : landscape){
html { min-width:1281px; max-width:1920px;}
body {background-color:#222222;  overflow:auto; overflow-x: hidden; overflow-y: hidden;}
.centrado-porcentual {
   /* position: absolute;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } 
.form-control{ position:relative; font-size:16px; width:250px; height:auto; padding:10px; @include box-sizing(border-box); &:focus { z-index: 2; }}
form[role=login] { color:#5d5d5d; background:#bfbaba; padding:16px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:#000000 1px solid;} 
form[role=login] img { display: block; margin: 0 auto; margin-bottom:5px; width:250px; height:100px; text-align:center; border:none;} 
form[role=login] input { font-size: 18px; margin:4px 10px; }
form[role=login] button { font-size: 18px; margin:4px 10px; width:250px; } 
form[role=login] > div { text-align: center; } 
.form-links { text-align:center; margin-top:1em; margin-bottom:10px;} 


.login-form {
	position:relative; 
	width:300px; 
	height:400px; 
	text-decoration:none;
	margin:0 auto auto; 
	border:none;
	text-align:center;
	overflow:auto;
	overflow-x: hidden;
	overflow-y: hidden;		
}
#change {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 0;
	top: 195px;
	left:230px;
	z-index:99990;
	cursor:pointer;
}
#change.eye {
	background: url("/login/eye4.png");
	background-size: cover;
} 
#change.eye2 {
	background: url("/login/eye2.png");
	background-size: cover;
}
}