@font-face {
  font-family: estandar;
  src: url('/fuentes/firasans_regular.ttf');
}

@font-face {
  font-family: negrita;
  src: url('/fuentes/firasans_medium.ttf');
  font-weight: normal;
}

@font-face {
  font-family: contrasenna;
  src: url('/fuentes/vinnetas_contrasenna_fontello.ttf');
  font-weight: normal;
  font-style: normal;
}

html {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: 'estandar', 'Arial', Helvetica, sans-serif;
}

html:before {
  content: '';
  position:absolute;
  z-index: -1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0%;
  /*	background:
     radial-gradient(circle at 0 0, 
      rgba(222, 220, 178, 1), transparent 80%), 
  
      radial-gradient(circle at 0% 100%, 
      rgba(210, 222, 229, 1), transparent 60%),
  
      radial-gradient(circle at 100% 0%, 
      rgba(210, 222, 229, 1), transparent 60%),
  
      radial-gradient(circle at 100% 100%, 
      rgba(31, 128, 158, 1), transparent 50%);*/
  background-color: #d2dce2;
  background-image: url('/img/control_fondo.jpg');
  background-size: cover;
  background-attachment: fixed;
}


html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #323232;
  font-family: 'gils', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 100%;
  background-color: #d2dce2;
  background-image: url('/img/control_fondo.jpg');
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  position: relative;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
}

header {
  display: none;
}

footer {
  display: none;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  min-height: 10rem;	
}

#contenido_sobre, h1 {display: none;}

#notificaciones,
#contenido {
  width: 35rem;
  position: relative;
}

/*#contenido::before {
  content: '';
  position: absolute;
  top: 2px; right: 1px; bottom: 2px; left: 1px;
  border-radius: 0.3rem;
  z-index: -1;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, .6) 1%,
      rgba(255, 255, 255, .3) 24%,
      rgba(255, 255, 255, .2) 49%,
      rgba(255, 255, 255, .1) 51%,
      rgba(255, 255, 255, .1) 75%,
      rgba(255, 255, 255, .3) 95%);

  background: linear-gradient(135deg, 
    rgba(255, 255, 255, .8) 1%, 
    rgba(255, 255, 255, .8) 24%, 
    rgba(255, 255, 255, .8) 49%, 
    rgba(255, 255, 255, .7) 51%, 
    rgba(255, 255, 255, .7) 75%, 
    rgba(255, 255, 255, .7) 95%);

  box-shadow: 0 0.1rem 0.2rem rgba(151, 152, 161, 0.7);
}*/






#contenido::before {
  content: '';
  position: absolute;
  top: 2px; right: 1px; bottom: 2px; left: 1px;
  border-radius: 0.3rem;
  z-index: -1;
  /*! background: linear-gradient(135deg,
      rgba(255, 255, 255, .6) 1%,
      rgba(255, 255, 255, .3) 24%,
      rgba(255, 255, 255, .2) 49%,
      rgba(255, 255, 255, .1) 51%,
      rgba(255, 255, 255, .1) 75%,
      rgba(255, 255, 255, .3) 95%); */


  background-image: url('/img/control_fondo.jpg');
  background-attachment: fixed;
  background-position: 0 0;
  background-size: cover;
  filter: blur(3px);
}

#contenido::after {
  content: '';
  position: absolute;
  top: 2px; right: 1px; bottom: 2px; left: 1px;
  border-radius: 0.3rem;
  z-index: -1;
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, .4) 1%, 
    rgba(255, 255, 255, .6) 35%, 
    rgba(255, 255, 255, .4) 49%, 
    rgba(255, 255, 255, .2) 51%, 
    rgba(255, 255, 255, .1) 75%, 
    rgba(255, 255, 255, .3) 95%);

  box-shadow: 
    0 0.1rem 0.2rem rgba(151, 152, 161, 0.7)
    , 0 0 0.3rem rgba(255, 255, 255, 0.5) inset
    ;
  /*! background: linear-gradient(135deg, 
    rgba(255, 255, 255, .4) 1%, 
    rgba(255, 255, 255, .4) 24%, 
    rgba(255, 255, 255, .5) 49%, 
    rgba(255, 255, 255, .3) 51%, 
    rgba(255, 255, 255, .3) 75%, 
    rgba(255, 255, 255, .3) 95%); */
}




#notificaciones, 
#acceso_usuario {
  /*background-color: rgba(255, 255, 255, .2);*/
  /*border-top: 1px solid rgba(255, 255, 255, 0.7);*/
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.7);*/
  /*border-radius: 0.5rem/1px;*/
  /*box-shadow: 0 0 3px white;*/

}

#notificaciones {
  padding: 1rem 2rem;
  color: rgb(31, 128, 158);
  margin-bottom: 1rem;
  text-align: center;
  position: absolute;
  margin-top: 22rem;
}

#notificaciones.modificable_js {
  opacity: 0;
}

#notificaciones.modificable_js.visible {
  opacity: 1;
  transition: opacity .1s ease-in 1.5s;
}

#acceso_usuario {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 20rem;
  padding: 1rem 2rem 1rem calc(50% + 2rem);
  background-image: url('/img/sipcamdata_portada.png');
  background-size: 239px 97px;
  background-repeat: no-repeat;
  background-position: 25% center;
  overflow: hidden;
  padding: 1rem 2rem 1rem calc(50% + 2rem);


}

#acceso_usuario.p1.modificable_js {
  width: 0;
  padding-left: 0;
  padding-right: 0;

  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: white;
}
.modificable_js {
  opacity: 0;
}

#acceso_usuario.p1.modificable_js.visible {
  width: 100%;
  padding-left: calc(50% + 2rem);
  padding-right: 2rem;

  height: 20rem;
  padding-top: 1rem;
  padding-bottom: 1rem;

  /*	transition: 
      width .7s ease-in-out 0s,
      padding-left .7s ease-in-out 0s,
      padding-right .7s ease-in-out 0s,*/

  /*		height .4s ease-out 1s, 
      padding-top .4s ease-out 1s,
      padding-bottom .4s ease-out 1s,
      border-color .4s ease-out 1s;*/

  /*	height .4s ease-in 1s, 
      padding-top .4s ease-in 1s,
      padding-bottom .4s ease-in 1s,
      border-color .4s ease-in 1s;*/

  /*height .4s cubic-bezier(.3,0,0,.9) 1s, 
      padding-top .4s cubic-bezier(.3,0,0,.9) 1s,
      padding-bottom .4s cubic-bezier(.3,0,0,.9) 1s,
      border-color .4s cubic-bezier(.3,0,0,.9) 1s;*/

  /*		height .4s ease-in-out 1s, 
      padding-top .4s ease-in-out 1s,
      padding-bottom .4s ease-in-out 1s,
      border-color .4s ease-in-out 1s;*/
}

.modificable_js.visible {
  opacity: 1;
  transition: opacity .1s ease-in .2s;
}

label {
  /*! color: #127594; */
  color: white;
  font-family: negrita;
  /*! color: #8e8e96; */
  text-shadow: 0 1px 1px white;
  text-shadow: 0 1px 1px #8e8e96;
}

input {
  margin: 0.5rem 0;
}

input[type="text"], 
input[type="password"], 
input[type="submit"] {
  padding: 0.3rem 0.5rem 0.3rem 3.1rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  border: none;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: 0.7rem center;
  box-shadow: 0 0.1rem 0.2rem rgba(151, 152, 161, 0.7);
  font-family: estandar;
  color: #746B6B;
  outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus  {
  box-shadow: 0 0.1rem 0.25rem rgba(151, 152, 161, 1);
  /*	box-shadow: 0 0 0.5rem #9abac9 inset,
      0 0 0.5rem #9798a1;*/
  /*! caret-color: transparent; */
}

input[type="text"] {
  background-image: url('/img/iconos/md-person-g.svg');
}

input[type="password"] {
  /*! font-size: 9rem; */
  /*! padding: 0.5rem 1rem 0rem 1.1rem; */
  /*! letter-spacing: -5rem; */
  /*caret-color: transparent;*/
  background-image: url('/img/iconos/md-key-g.svg');
  letter-spacing: 0.2rem;
  font-family: contrasenna;
  /* line-height: 2rem; */
}

input[type="submit"] {
  /*position: relative;*/
  padding: 0.3rem;
  transition: 0.1s padding-left ease-in;
  background-color: #DCDCDC;
  font-family: negrita;
  font-weight: normal;

}
input[type="submit"]:hover {
  padding-top: 0.22rem;
  /*animation: boton_envia 0.3s;*/
}
input[type="submit"]:active {
  animation: boton_envia 0.3s;
}

@keyframes boton_envia {
  0% {padding-top: 0.2rem;	}
  50% {padding-top: 0.3rem;	}
  100% {padding-top: 0.2rem;	}
}


.recuperar_clave {
  position: absolute;
  display: inline-block;
  left: 0.5rem;
  bottom: 0.5rem;
  overflow: hidden;
  height: 1rem;
  width: 1rem;
  border-radius: 0.5rem;
  color: transparent;
  background-color: grey;
  line-height: 1rem;
  padding: 0 0.3rem;
  font-family: negrita;
  font-size: 0.7rem;
  text-decoration: none;

  transition:
    width 0.2s ease-in,
    color 0.2s ease-in 0.1s;
  box-shadow: 0 0 0.2rem black;
}


.recuperar_clave::first-letter {
  color: white;
}

.recuperar_clave:hover {
  overflow: visible;
  width: 8rem;
  color: white;
}



.recuperar_clave:before {
  content: '';
  top: 0; right: 0; bottom: 0; left: 0;
  box-shadow: 0 0 0.2rem grey inset;
}

/*@media all and (max-width: 37rem)*/
@media all{
  main {
    padding: 0.7rem;
  }

  #notificaciones, #contenido {
    width: 20rem;
    max-width: 100%;
  }

  #acceso_usuario.p1,
  #acceso_usuario.p2 {
    height: 25rem;
    padding: 5% 2rem 3rem 2rem;
    background-position: center 20%;
    justify-content: flex-end;
  }

  #acceso_usuario.p1.modificable_js.visible,
  #acceso_usuario.p2.modificable_js.visible{
    height: 25rem;
    padding-top: 50%;
    padding-right: 2rem;

    padding-left: 2rem;
    padding-bottom: 3rem;
  }

}