/*ESTILOS PARA DISPOSITIVOS MOVILES*/
@media only screen and (max-width: 700px) {
body{
width: 100%  ;  
background-color: white;
text-align: center;
}
h1{
color:#565656;
text-align: center;
margin-top:30px;
}

#login{
    
width:90%;
height: 500px;
margin:0 auto;
margin-top: 50px;
border-color: yellow;
background-color: #d8d5d6;
border-radius: 20px;
text-align: center;
}


img{
    background-color: white;
text-align: center;
padding:20px;
border-radius: 150px;
border-color: white;
width: 100px;
margin-top:-30px;
margin-bottom: 20px;
}

label{
padding-left: 10%;
width: 80%;
padding-right: 10%;
color:white;
text-align: left;
/*margin-top:20px;*/
}
input{  
 -webkit-appearance: none; 
 -moz-appearance: none;    
padding-right: 50%;
width: 200px;    
 border:none; 
 height: 44px;
 margin: 0;
 line-height: 40px; 
 font-size: 17px;
 border-radius: 15px;
 padding: 5px;
 color:#565656; 
 margin-top:15px;
}
input:focus{
    border:none;
}

#boton{

 border-radius: 15px;
 background-color: #afd999;
height: 44px;
line-height: 40px; 
font-size: 17px;
width: 100px;
margin-top:20px;
color:white;
cursor: pointer;
}
#boton:hover{
 background-color: #0f4c81;
}

p{    
    color:red;
    text-align: center;
}

}    
/*ESTILOS PARA ESCRITORIO*/

@media only screen and (min-width: 701px) {
body{
background-color: white;
}

#login{
    
width:600px;
height: 450px;
margin:0 auto;
margin-top: 70px;
border-color: yellow;
background-color: #d8d5d6;
border-radius: 20px;
text-align: center;
}

h1{
color:#565656;
text-align: center;
margin-top: 70px;
}
img{
    background-color: white;
text-align: center;
padding:20px;
border-radius: 200px;
border-color: white;
width: 100px;
margin-top:-50px;
margin-bottom: 20px;
}

label{
padding-left: 10%;
width: 80%;
padding-right: 10%;
color:white;
text-align: left;
/*margin-top:20px;*/
}
input{  
padding-right: 50%;
width: 200px;    
 border:none;
 border-radius: 15px;
 height: 30px;
 padding: 5px;
 color:#565656; 
 margin-top:15px;
}
input:focus{
    border:none;
}

#boton{

 border-radius: 15px;
 background-color: #afd999;
height: 30px;
width: 100px;
margin-top:20px;
color:white;
cursor: pointer;
}
#boton:hover{
 background-color: #0f4c81;
}
p{    
    color:red;
    text-align: center;
}

}

/*ESTILOS COMUNES*/
@font-face {
	font-family: euphemia;
	src: url(fonts/euphemia.ttf);
}

body{
font-family:euphemia;
}