/* Base styles */




*, *:after, *:before {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  line-height: 1.5;
  height: 100%;
  
}
body {
  position: relative;
  margin: 0;
  font-family: Arial,Typo_Round_Light_Demo,Typo_Round_Light_Demo;
  min-height: 80%;
  color: #1A89A5;
  background-size: cover; /*tamaño de fondo de pantalla*/
}

button {
  cursor: pointer;

  border: 0;
  padding: 0;
  background-color: transparent;
}

/* tamaño del logotipo */
img {
    
  vertical-align: middle;
  max-width: 170%;
  
}






/* Container */
.container {
  position: absolute;
  width: 24em;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: intro .7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.title {
	font-family:Typo_Round_Light_Demo;
}
.profile {
  position: relative;
  top:95px;
}
.profile--open {
}

/* Logotipo */
.profile--open .profile__form {
  visibility: visible;
  height:auto;
  opacity: 1;
  transform: translateY(-3em);
  padding-top: 26.5em;
  display:inline-flex;
 
}
.profile--open .profile__fields {
  opacity: 10;
  visibility: visible;
}
/* Posicion_Logotipo */
.profile--open .profile__avatar {
  transform: translate(-50%, 1.3em);
  border-radius: 1%;
   z-index:999;
}
.profile__form {
  position: relative;
  background: rgba(246, 244, 244, 0.40);
    display: inline-block;
    width: 350px;
    height: 81px;
    margin: 9px;
    border: 0.80px solid white; 
    border-radius: 5px;
   visibility: hidden;
  opacity: 0.5;
  height: 70;
  padding: 3em;
  border-radius: .25em;
  -webkit-filter: drop-shadow(0 0 2em rgba(0,0,0,0.2));
  transition: 
    opacity .50s ease-in-out,
    height .50s ease-in-out,
    transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  top:-128px;
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
  -webkit-box-shadow:0px 0px 12px 0px rgba(0,0,0,0.6);
}
.profile__fields {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



.user{

    line-height: 1.4rem;
    
}

.pasw{
       line-height:1.4rem;

}

.record{
    line-height: 3rem;

}
.profile__avatar {
  position:absolute;
  border-radius:10%;
 
  left: 36%;
  transform: translateX(-50%);

  overflow: visible;
  width: 11em;

  display: block;
  /*transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
  will-change: transform;
  top: 105px;
}

.profile__avatar:focus {
  outline: 0;
}
.profile__footer {
  padding-top: 50px;
}


/* Formulario */
.field {
  position: center;
  margin-bottom: 0.7em;
  color: #404040;
  font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
}

/* formato de letras login */
.form-letters{
      color: #404040;
    font-size: 17px;
    font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    position: relative;
 


}
.label {
  
    position: fixed;
    height: 2rem;
    line-height: 3rem;
    bottom: 0;
    color: #fff;
    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

label{
      cursor: default;
}

.input {
  width: 100%;
  font-size: 100%;
  border: 0;
  padding: 0;
  background-color: transparent;
  height: 2rem;
  line-height: 3rem;
  border-bottom: 1px solid #eee;
  color: #056576;
  transition: all .1s ease-in;
}
.input:focus {
  outline: 0;
  border-color: #E85477;
}


.input:focus + .label,
input:valid + .label {
  transform: translateY(-90%);
  font-size: 0.75rem;
  color: transparent;
}

/* Boton enviar */
.btn-entrar {
  border: 0;
  

  letter-spacing: .2em;
     background:#16799f url('../Images/icono_ingresar_rojo.png') no-repeat 36px center;
    margin: 5px;

    font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";

    font-size: 14px;
    font-weight: 700;
    width: 220px;
    height: 40px;
    margin-top: 12px;
    padding: 0 7px 0 55px;
  
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    text-decoration-color: white;
  
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.15), inset 0px -3px 0px rgba(0,0,0,0.13);
   border-radius: .5rem;
    cursor:pointer;
    top: -28px;
position: relative;
left: 5%;

  
}

.btn-entrar:hover {
  
   background:#e95578 url('../Images/icono_ingresar_azul.png') no-repeat 36px center;
}




/* Intro animation */
@keyframes intro {
  from {
    opacity: 0;
    top: 40;
  }
  to {
    opacity: 6;
    top: 40%;
  }
}


.title-iniciar{

    color: #404040;
    font-size: 21px;
    font-weight: 600;
    font-family: "Segoe UI","Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    position: relative;
    top: -29px;
    left: 30%;
   
}

.icono-insumo-paciente{

     position: absolute;
    background-image: url(../Images/home_insumos_paciente_1-06.png);
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-right: 3px;
    width: 900px;
    height: 40px;
    margin-right: 8px;
    padding-left: 0px;
    right: 15px;
    left:4px;
    top: -205px;
    z-index:1;

}

.icono-insumo-paciente{

     position: absolute;
    background-image: url(../Images/home_insumos_paciente_1-06.png);
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-right: 3px;
    width: 900px;
    height: 40px;
    margin-right: 8px;
    padding-left: 0px;
    right: 15px;
    left:4px;
    top: -205px;
    z-index:1;

}