@charset "UTF-8";
/* TOPBAR STYLE */

body {
	margin-left: 0px;
	margin-right: 0px;
	font-family: 'Montserrat', sans-serif;
}
	
/*VERSIÓN ESCRITORIO*/
	
#topbar1 {
		
float: right;

}

.form1 {
	
float:left; 
padding-left:20px; 
padding-right:20px; 
height:60px; 
line-height:60px; 
color:#fff; 
font-size:16px; 
font-weight:bold;
	
}
	
#numproduct {
	
position: absolute;
font-family: 'Muli', sans-serif;
font-size: 13px;
color: #fff;
top: 26px;
right: 26px;
		
}
	
#form1 input[type="text"] {
  width: 180px;
  height:28px;
  font-size: 14px;
  padding:0px;
  padding-left:10px;
  float:left;
  margin-top:15px;
  border:solid #fff 1px;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  font-family:Arial, Helvetica, sans-serif;
}
input {
font-family:Arial, Helvetica, sans-serif;
}
	
#formregistro input[type="text"], #formregistro input[type="password"], #formregistro input[type="email"] { 
width:calc(100% - 12px);
height:25px; 
line-height:25px;
padding-left:10px;
font-size:12px;
}
	
#formpassword input[type="text"] {
width:270px; 
height:25px; 
line-height:25px;
padding-left:10px;
font-size:12px;
color:#333;
border:solid 1px #fff;
background-color:#F7F2F6;
}
.submitbuscar {
width:30px; 
height:30px; 
float:left; 
-webkit-appearance:button; 
background-image:url(/images/buscar.jpg); 
border-top-right-radius: 7px; 
border-bottom-right-radius: 7px; 
margin-top:15px; 
border:1px solid #fff; 
background-position:-2px -2px;
}
#logincuadro {
width:350px; 
height:390px; 
background-color:#F194BF;
position:absolute; 
top:60px; 
right:0px; 
z-index:6;
overflow:hidden;
display:none;
}
#passwordcuadro {
width:350px; 
height:300px; 
background-color:#F194BF;
position:absolute; 
top:60px; 
left:0px; 
z-index:1;
overflow:hidden;
}
#registratecuadro {
width:550px; 
height:250px; 
background-color:#F194BF;
position:absolute; 
top:60px; 
right:0px; 
z-index:6;
overflow:hidden;
display:none;
}
#formregistro {
width:550px; 
height:540px; 
float:left; 
margin-top:20px;
opacity:0.0;
z-index:6;
}
#formregistro .error { 
height:20px; 
float:left;
width:155px;
line-height:20px;
margin-top:5px;
margin-left:20px;
font-weight:100;
font-size:11px;
color:#fff;
}
#formregistro .error2 { 
height:20px; 
float:left;
width:480px;
line-height:20px; 
margin-left:20px;
font-weight:100;
font-size:11px;
margin-top:5px;
color:#fff;
}
#formlogin {
width:350px; 
height:420px; 
float:left; 
margin-top:20px;
opacity:0.0;
}
	
#formlogin .forminputdiv {
	
width:280px; 
height:30px; 
float:left; 
line-height:30px; 
margin-left:30px;

}
	
#formlogin .error {
width:280px; 
height:20px; 
float:left; 
line-height:30px; 
margin-left:30px;
font-weight:100;
font-size:11px;
}
#formpassword {
width:350px; 
height:390px; 
float:left; 
margin-top:20px;
opacity:0.0;
}
#formpassword .forminputdiv {
width:280px; 
height:30px; 
float:left; 
line-height:30px; 
margin-left:30px; 
}
#formpassword .error {
width:280px; 
height:20px; 
float:left;
color:#fff; 
line-height:30px; 
margin-left:30px;
font-weight:100;
font-size:11px;
}
#formpassword .input2 {
width:485px;
}
	
#formregistro .error2 { 
height:20px; 
float:left;
width:480px;
line-height:20px; 
margin-left:20px;
font-weight:100;
font-size:11px;
}
	
#formregistro .forminputdiv {
	
width: 154px; 
height: 25px; 
float: left;  
margin-top: 10px; 
margin-left: 20px; 
z-index: 1;
line-height: 25px;

}
	
#formregistro .forminputdiv3 {

width: 154px;
height: 25px;
float: left;
margin-top: 10px;
margin-left: 20px;
z-index: 1;
line-height: 25px;
	
}
	
#formregistro .forminputdiv2 {
width:503px; 
height:30px; 
float:left; 
line-height:30px;
margin-left:20px;
margin-top:10px;  
}

#formpassword {
width:350px; 
height:390px; 
float:left; 
margin-top:20px;
opacity:0.0;
}
#formpassword .forminputdiv {
width:280px; 
height:30px; 
float:left; 
line-height:30px; 
margin-left:30px;
}
#formpassword .error {
width:280px; 
height:20px; 
float:left; 
line-height:30px; 
margin-left:30px;
font-weight:100;
font-size:11px;
}
#formpassword .input2 {
width:485px;
}
.codigodiv {
width:295px; 
height:30px; 
float:left;
margin-left:30px; 
margin-top:10px;
 
}
#codigo {
height:25px;
line-height:25px;
font-size:12px;
color:#ccc;
width:calc(50% - 20px);
background-color:#F7F2F6;
border:1px solid #fff;

}
#captchadiv {
width:calc(50% - 20px);
height:28px; 
line-height:28px; 
float:left; 
margin-left:10px; 
border:solid 1px #fff; 
overflow:hidden;
}
:focus {
outline:none;
}
#usuario, #password {
width:270px; 
height:25px; 
line-height:25px;
padding-left:10px;
font-size:12px;
color:#333;
border:solid 1px #fff;
background-color:#F7F2F6;
}
#password1, #repassword {

text-security:disc; 
-webkit-text-security:disc;

}
.submitbutton { 
width:278px;
height:30px; 
float:left; 
line-height:30px; 
margin-left:30px; 
margin-top:10px;
cursor:pointer;
font-weight:bold;
text-align:center;
}
	
#submitbutton2 {
	
width:498px; 
margin-top:10px;
margin-left:20px;

}
.diagonal {
	
  position: relative;
  line-height: 30px;
  background: #F194BF;
  color: white;
  border: solid 3px #fff;
  font-weight: 100;
  overflow: hidden;
  z-index: 1;
  padding: 0px;
  font-family: 'Muli', sans-serif;
  letter-spacing: 2px;
}
	
.diagonal:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  color: #D13A85;
  height: 1200%;
  background: #fff;
  z-index: -1;
  transform-origin: 0% 0%;
  transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
  transform: translateY(10%) translateX(16%) rotate(-45deg);
  transition: transform .3s;
}
.diagonal:hover::after {
  transform: translateY(15%) translateX(-25px) rotate(-45deg);
}
.diagonal:hover {
color: #D13A85;
transition: .1s linear;
}
#olvido {

width:calc(100% - 62px); 
font-size:12px; 
margin-left:31px;
height:30px; 
line-height:30px; 
float:left; 
margin-top:0px;
color:#fff;
font-weight:500;

}
	
#olvido1 {
	
width:calc(100% - 54px); 
margin-top:0px; 
margin-left:27px;
height:30px; 
line-height:30px; 
float:left;
	
}
	
#captchaimg {
	
float:left;
	
}
.display {

float:left;

}
	
/*VERSIÓN MÓVIL*/
	
@media screen and (max-width: 850px) {
	
#topbar1 {
		
float:left;
width:100%;

}
	
#form1 {
		
float:left;
width:100%;
padding:0px;
color:#fff; 
font-size:16px; 
font-weight:bold;

}
	
#numproduct {
		
position: absolute;
font-family: 'Muli', sans-serif;
font-size: 13px;
color: #fff;
top: 26px;
left: 219px;

}
	
#formregistro input[type="text"], #formregistro input[type="password"], #formregistro input[type="email"] {
	
width:calc(100% - 16px);
height:40px; 
line-height:25px;

}
	
#formregistro .forminputdiv {
	
width: 90%;
height: 45px;
float: left;
margin-left: 5%;
margin-top: 10px;

}
	
#formregistro .forminputdiv3 {

width: 90%;
height: 45px;
float: left;
margin-left: 5%;
margin-top: 10px;
	
}

#formregistro .forminputdiv2 {

width: 90%;
height: 45px;
float: left;
margin-left: 5%;
margin-top: 10px;
	
}

#logincuadro {
	
width: 100%;
height: 420px;
background-color: #F194BF;
position: absolute;
top: 150px;
left: 0px;
z-index: 6;
overflow: hidden;

}

#registratecuadro {
		
width: 100%;
height: 530px;
background-color: #F194BF;
position: absolute;
top: 150px;
left: 0px;
z-index: 6;
overflow: hidden;
		
}
	
#passwordcuadro {
width:100%; 
}
#formlogin {
width:100%;
}
	
#formregistro {
		
width: 100%;
height: 540px;
padding-top: 30px;
	
}
	
#formlogin .forminputdiv {
		
width: 80%;
margin-left: 10%;
height: 45px;
float: left;
line-height: 30px;

}

#formregistro .error { 
height:20px; 
float:left;
width:154px;
line-height:20px; 
margin-left:20px;
font-weight:100;
font-size:11px;
	
}
	
#usuario, #password {
width:calc(100% - 16px); 
height:40px;
}
#formlogin .error {
width:80%;
margin-left:10%; 
height:20px;
line-height:20px;
font-size:16px;
}
.codigodiv {
width:80%;
margin-left:10%;
position:relative;
height:40px;
}
#codigo {
width:calc(51% - 16px); 
font-size:16px;
height:38px;
line-height:38px;
}
#captchadiv {
width:calc(50% - 16px);
height:40px; 
}
.submitbutton { 
width:calc(80% - 4px);
margin-left:10%;
}
#formpassword {
width:100%; 
height:340px; 
float:left; 
margin-top:20px;
opacity:0.0;
}
#formpassword .forminputdiv {
width:80%; 
height:45px; 
float:left; 
line-height:40px; 
margin-left:10%; 
}
#formpassword .error {
width:80%;
height:20px; 
float:left; 
line-height:20px; 
margin-left:10%;
font-weight:100;
font-size:15px;
}
#formpassword input[type="text"] {

width:calc(100% - 12px);
height:35px;
line-height:35px;

}

#olvido {

width:80%; 
font-size:16px; 
margin-left:10%;
margin-top:10px; 

}
#olvido1 {

width:80%; 
margin-top:10px; 
margin-left:10%;

}

#submitbutton {
	
width: 77%; 
margin-top: 20px;
margin-left: 10%;

}

#submitbutton2 {

width: 88%; 
margin-top: 20px;
margin-left: 5%;

}
.display {

display: table; 
margin: 0 auto;
float:none;

}

}