@charset "utf-8";

body {
  background: url(http://www.pack.pastasbettini.com.ar/production/images/fondo.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Bree Serif', serif;
  font-size:0.8rem;
  height: 100%;
}

.login-card {
	padding: 30px;
	width: 20%;
	background-color: #ffffff;
	margin: 0 auto;
	border-radius: 2px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	min-width: 200px;
    max-width: 450px;
}

@media only screen and (max-width: 1200px) {
   .login-card { width: 25%; }
}
@media only screen and (max-width: 1000px) {
   .login-card { width: 45%;  }
}
@media only screen and (max-device-width: 1000px) {
   .login-card {width: 50%; margin: 100px auto 0px auto; max-width: 50%; }
}

@media only screen and (max-device-width: 800px) {
   .login-card {width: 60%; margin: 100px auto 0px auto; max-width: 60%; }
}


@media only screen and (max-device-width: 500px) {
   .login-card {width: 70%; margin: 100px auto 0px auto; max-width: 70%; }
}




.login-card h1 {
  font-weight: 100;
  text-align: center;
  font-size: 1.5em;
}

@media only screen and (max-device-width: 1000px) {
	.login-card h1 { font-size: 2em;}
 }

.login-card input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.login-card input[type=text], input[type=password] {
	height: 44px;
	font-size: 1rem;
	font-family:'Ubuntu Condensed',"sans-serif;";
	width: 100%;
	margin-bottom: 10px;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-top: 1px solid #c0c0c0;
	/* border-radius: 2px; */
	padding: 0 8px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

@media only screen and (max-device-width: 1000px) {
	.login-card input[type=text], input[type=password] { height: 54px; font-size: 1.3rem;}
   

}


.login-card input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.login {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

@media only screen and (max-device-width: 1000px) {
	.login-submit { font-size: 18px;}
}

.login-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  height:40px;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf));
	background: -moz-linear-gradient(top,#ededed 5%,#dfdfdf 100%);
	background: -webkit-linear-gradient(top,#ededed 5%,#dfdfdf 100%);
	background: -o-linear-gradient(top,#ededed 5%,#dfdfdf 100%);
	background: -ms-linear-gradient(top,#ededed 5%,#dfdfdf 100%);
	background: linear-gradient(to bottom,#ededed 5%,#dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf', GradientType=0);												background-color: #ededed;
color:#666;
}

@media only screen and (max-device-width: 1000px) {
	.login-submit { height:54px;}
}

.login-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0.05,#f24537),color-stop(1,#c62d1f));
	background: -moz-linear-gradient(top,#f24537 5%,#c62d1f 100%);
	background: -webkit-linear-gradient(top,#f24537 5%,#c62d1f 100%);
	background: -o-linear-gradient(top,#f24537 5%,#c62d1f 100%);
	background: -ms-linear-gradient(top,#f24537 5%,#c62d1f 100%);
	background: linear-gradient(to bottom,#f24537 5%,#c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f', GradientType=0);																									background-color: #C30;
color:#FFF;
}

.login-card a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
}

.login-card a:hover {
  opacity: 1;
}

.login-help {
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.logo {
  width: 100%;
  text-align: center;
  font-size: 12px;
}


.botones {
	width: 334px;
	background-color: #F7F7F7;
	margin: 0 auto;
	border-radius: 2px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.trabajar {
  /* border: 1px solid #3079ed; */
  border: 0px;
  height:40px;
  width:100%;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
background-color: #F7F7F7;
color:#666;

}
.trabajar:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #C30;
color:#FFF;
}

.practicar {
  /* border: 1px solid #3079ed; */
  border: 0px;
  height:40px;
    width:100%;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
 	background-color: #16D92A;
	color:#FFF;
}
.practicar:hover {
	/* border: 1px solid #2f5bb7; */
	border: 0px;
	text-shadow: 0 1px rgba(0,0,0,0.3);
	background-color: #ededed;
	color: #666;
}

.latder {
	width:50%;
	float:left;	
}

.latder {
	width:50%;
	float:right;	
}

.latder2 {
	width:100%;
}

a.latder2:link   
{   
 text-decoration:none;   
}

.alerta{
	text-align:center;
	width:100%;
	background-color:#F00;
	padding:10px 0px;
	margin-bottom:15px;
	color:#FFF;
	font-size:1rem;
	
}

@media only screen and (max-device-width: 1000px) {
	.alerta { font-size:1.5em;}
}

.botones2 {
	width: 334px;
	margin: 0 auto;
	border-radius: 2px;
	overflow: hidden;
}

.trabajarActivo {
	border: 0px;
	height: 40px;
	width: 100%;
	text-shadow: 0 1px rgba(0,0,0,0.1);
	background-color: #464946;
	color: #FFF;
	font-family:'Ubuntu Condensed',"sans-serif;";
	display: block;   
		
}
.trabajarActivo:hover {
	background-color: #000;
}	

.trabajarOculto {
	display: none;
}
