html {
	overflow: hidden;
}
body {
	background-color: white;
	
}
html, body, #form-login, #controls, #captchacontainer, #user, #passwd, #infologin, #captcha, #message {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#user, #passwd, #captcha {
	outline: none;
	font-size: 1em;
	border: 0.15em solid #dfdfdf;
	padding: 0.5em;
	background-color: white;
}
#user, #passwd, #captcha, #captchacontainer,#captchacontrols {
	margin: 0 0 1em 0;
	
	overflow: hide;
	
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
}
#user, #passwd {
	width: 100%;
	float: left;
	
}

#captchacontrols {
	width: 10%;
	float: left;
}

#captcha {
	width: 40%;
	float: left;
}
#capimg {
	width: 100%;
	height: 100%;
	background-size: 100% 110% !important;
	
	overflow: hide;
	
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	
}

#send {
	color: white;
	background-color: #c81876;
	border: none;
	float: left;
	padding: 0.25em 2em;
	cursor: hand;
	cursor: pointer;
	
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}

#captchacontainer {
	width: 50%;
	height: 3em;
	background-color: #EAEAEA;
	float: left;
	border: 0.15em solid white;
}




#controls {
	background-color: white;
	margin-top: 2em;
	box-shadow:8px 8px 30px rgba(159,159,159,0.7);
	
	overflow: hidden;
	
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	
}
#infologin {
	color: #888;
	font-size: 0.7em;
	padding:  1.5em 0em !important;
}
#limpiador {
	clear: both;
}

#ornament {
	width: 35%;
	height: 100%;
	float: left;
	background-color: #ca0a7f;
}
#l-form {
	width: 53%;
	height: 86%;
	float: left;
	margin: 3.5% 0 0 6%;
	overflow: auto;
}

#logo {
	width: 13em;
	height: 5em;
}



@media (orientation: portrait) {
	@media screen and (min-width: 2300px) {
		#controls  {
			height: 50vh !important;
			margin-top: 25vh !important; 
		}
	}
	
	@media screen and (min-width: 1800px) and (max-width: 2299px){
		#controls  {
			height: 50vh !important;
			margin-top: 25vh !important; 
		}
	
	}
	
	@media screen and (min-width: 1400px) and (max-width:1799px) {
		#controls  {
			height: 50vh !important;
			margin-top: 25vh !important; 
		}
	}
	
	@media screen and (min-width: 980px) and (max-width:1499px) {
		#controls  {
			height: 50vh !important;
			margin-top: 25vh !important; 
		}
		@media screen and (max-height: 840px) {
			#controls  {
			height: 60vh !important;
			margin-top: 20vh !important; 
			}
		}
		
		@media screen and (max-height: 780px) {
			#controls  {
				height: 70vh !important;
				margin-top: 15vh !important; 
			}
		}
	}
	
	@media screen and (min-width: 640px) and (max-width: 979px) {
		#controls  {
			height: 50vh !important;
			margin-top: 25vh !important; 
		}
		/*
		#user, #passwd, #captcha, #captchacontainer,#captchacontrols {
			background-color: black;
		}
		*/
		@media screen and (max-height: 840px) {
			#controls  {
				height: 60vh !important;
				margin-top: 20vh !important; 
			}
			/*
			#user, #passwd, #captcha, #captchacontainer,#captchacontrols {
				background-color: yellow;
			}
			*/
		}
		
		@media screen and (max-height: 780px) {
			#controls  {
				height: 70vh !important;
				margin-top: 15vh !important; 
			}
			/*
			#user, #passwd, #captcha, #captchacontainer,#captchacontrols {
				background-color: blue;
			}
			*/
		}
		
		@media screen and (max-height: 600px) {
			/*
			#user, #passwd, #captcha, #captchacontainer,#captchacontrols {
				background-color: red;
			}
			*/
		}
		
		@media screen and (max-height: 500px) {
			/*
			#user, #passwd, #captcha, #captchacontainer,#captchacontrols {
				background-color: green;
			}
			*/
		}
	}
	
	@media screen and (max-width: 639px) {
	}
}

@media (orientation: landscape) {
	#controls  {
		height: 50vh;
		margin-top: 25vh; 
	}
	
	/* desde los 780 px de alto */
	
	@media screen and (max-height: 840px) {
		#controls  {
		height: 60vh !important;
		margin-top: 20vh !important; 
		}
	}
	
	@media screen and (max-height: 780px) {
		#controls  {
			height: 70vh !important;
			margin-top: 15vh !important; 
		}
	}
	
	@media screen and (max-height: 600px) {
		#controls  {
		height: 80vh !important;
		margin-top: 10vh !important; 
		}
		
	}
	
	@media screen and (max-height: 500px) and (min-width: 640px) and (max-width: 979px)  {
		html {
			overflow: auto;
			height: auto;
		}
		body { 
			background: none;
			height: auto;
		}
		#ornament {
			
		
		}
		#send {
			margin-bottom: 1.5em;
		}
		#l-form {
			padding: 0 2.5%;
			margin: 0;
			width: 60%;
			height: 100%;
		}
		#controls  {
			height: 100vh !important;
			font-size: 0.9em;
			
			box-shadow: none;
			height: auto !important;
			margin-top: 0 !important;
			overflow: auto;
			width: 100% !important;
			margin-left: 0% !important;
			
			-webkit-border-radius: 0em;
			-moz-border-radius: 0em;
			border-radius: 0em;
		}
		#infologin {
				display: none;
		}
	}
}


/* xhdpi,  xxhdpi screen and more > 2300 */
@media screen and (min-width: 2300px) {
	#controls, #infologin {
		width: 25%;
		margin-left: 25%;
	}
	#ine_logo {
		-webkit-background-size: 50% auto;
		-moz-background-size: 50% auto;
		-o-background-size: 50% auto;
		background-size: 50% auto;
	}
}

@media screen and (min-width: 1800px) and (max-width: 2299px){
	#controls, #infologin {
		width: 40%;
		margin-left: 30%;
	}
	#ine_logo {
		-webkit-background-size: 50% auto;
		-moz-background-size: 50% auto;
		-o-background-size: 50% auto;
		background-size: 50% auto;
	}
}

@media screen and (min-width: 1400px) and (max-width:1799px) {

	#controls, #infologin {
		width: 50%;
		margin-left: 25%;
	}
	#ine_logo {
		-webkit-background-size: 50% auto;
		-moz-background-size: 50% auto;
		-o-background-size: 50% auto;
		background-size: 50% auto;
	}
}
/* hdpi screen <= 1299 */
@media screen and (min-width: 980px) and (max-width:1399px) {
	#controls, #infologin {
		width: 70%;
		margin-left: 15%;
	}
	#ine_logo {
		-webkit-background-size: 55% auto;
		-moz-background-size: 55% auto;
		-o-background-size: 55% auto;
		background-size: 55% auto;
	}
}
/* xhdpi tablets and phones <= 979 */ 
@media screen and (min-width: 640px) and (max-width: 979px) {
	#controls, #infologin {
		width: 90%;
		margin-left: 5%;
	}
	#ine_logo {
		-webkit-background-size: 60% auto;
		-moz-background-size: 60% auto;
		-o-background-size: 60% auto;
		background-size: 60% auto;
	}
}
/* hdpi tablets and phones <= 650 */
@media screen and (max-width: 639px) {
	#controls, #infologin {
		width: 100%;
		margin-left: 0%;
	}

	
	#ine_logo {
		background-repeat: no-repeat;
		background-position :right center !important;
		
		width: 97% !important;
		height: 100% !important;
		
		-webkit-background-size: 7.5em auto;
		-moz-background-size: 7.5em auto;
		-o-background-size: 7.5em auto;
		background-size: 7.5em auto;
	}
	
	#ornament {
		width: 100%;
		height: 3.5em;
	}
	#l-form {
		width: 90%;
		height: auto;
		float: left;
		/*margin: 3.5% 0 0 6%;*/
		padding-top: 1em;
	}
	
	html {
		overflow: auto;
		height: auto;
	}
	body { 
		background: none;
		height: auto;
	}
	#send {
		margin-bottom: 1.5em;
	}
	#controls  {
	
		background: none;
		box-shadow: none;
		height: auto !important;
		margin-top: 0 !important;
		
		overflow: auto;
		
		-webkit-border-radius: 0em;
		-moz-border-radius: 0em;
		border-radius: 0em;
	}
	#infologin {
		display: none;
	}
	/*
	@media (orientation: portrait) {
		
		
	}
	*/
}

#message {
	padding: 0.8em;
	text-align:center;
	display: none;
	font-size: 0.9em;
	margin-bottom: 1em;
}

.m-hide {
	display: block !important;
}
.error {
	background-color: #D8203F;
	color: white;
	display: block !important;
}
.success {
	border: 1px solid #39d137;
	background-color: #e7f7ee;
	color: #218024;
	display: block !important;
}
.warning {
	background-color: #F7F4E7;
	border: 1px solid #D1CC39;
	color: #803C1F;
	display: block !important;
}
.info {
	background-color: #DBEAFF;
	border: 1px solid #08367A;
	color: #062E68;
	display: block !important;
}