@charset "utf-8";
/* CSS Document */

body{
/*  background:#057A87; */
  overflow: hidden;
  /*
  background:url(../imgSistema/fondo.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
*/
background: #222d32 /*rgba(24, 28, 33, 0.9)*/;

}
/*
@-webkit-keyframes girando {
  from { -webkit-transform: rotateY(180deg);    }
  to   { -webkit-transform: rotateY(-0deg); }
}

@-webkit-keyframes girando2 {
  from { -webkit-transform: rotateY(-180deg);    }
  to   { -webkit-transform: rotateY(0deg); }
}
*/
.btn-verde{
  color: #fff !important;
  background-color: #d9534f; 

}
.centrar{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}
.footer{
    width: 100%;
    bottom:2px;
    position: fixed;
    text-align: center;
    color: white !important;

}
.contenido{
    margin:  auto;
  }

 .ModalLogin{
   -webkit-animation-name: girando;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: 2s;
   -webkit-animation-duration: 2s;
   -webkit-transform-style: preserve-3d;
 }
 .ModalRegistro{
   -webkit-animation-name: girando2;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: 2s;
   -webkit-animation-duration: 2s;
   -webkit-transform-style: preserve-3d;
 }
.modal-content{
  background-color: transparent;
  color:white;
  text-decoration-color: white;
}
.inferior{
    position:absolute;
    bottom:5px;
    right:10px;
 }
.error{
  color:red;
}

/* preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #000;
    color:#FFF;
    z-index: 100;
}
#loader {
    width: 100px;
    height: 100px;
    position: absolute;
    left:50%; top:50%;
    background: url(../Img/loader.gif) no-repeat center 0;
    margin:-50px 0 0 -50px;
}
.link{
  color:white;
}
.link:hover { color: #1ab394;  } /* CSS link hover (green) */

.modal{

    width: 100%;
    height: 100%;
    background: rgb(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;

}
.ImagenFb{

    width: 70px !important;
    height: 70px !important;
    margin:  auto;
}

.ImagenFb img {
    border-radius: 50%;
}

.contenido{
   margin:  auto;
  

  }

  .link{
  color:white;
}
.imagenFooter{
  width: 40px;
  height: 30px;
}

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

#id_img_fondo{    
    width: 100%; /* en porcentaje (el highlight del foro lo trasforma) */
    height: 100%;
    top:0;
    left:0;
    position:fixed;
    z-index: -1;   
    transition:all 0.3s ease;
}

#cerrar-modal {
  display: none;
}
#cerrar-modal + label {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 100;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  transition: all .5s;
}

/* enable absolute positioning */
.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
  position: absolute;
  padding: 5px;
  pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.card .input-container {
  position: relative;
  margin: 0 60px 50px;
}
.card .input-container input {
  outline: none;
  z-index: 1;
  position: relative;
  background: none;
  width: 100%;
  height: 54px;
  border: 0;
  color: white;
  font-size: 20px;
  font-weight: 400;
}
.card .input-container input:focus ~ label {
  color: white;
  -webkit-transform: translate(-12%, -50%) scale(0.75);
          transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {
  width: 50%;
}
.card .input-container input:valid ~ label {
  color: white;
  -webkit-transform: translate(-12%, -50%) scale(0.75);
          transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container label {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: 20px;
  font-weight: 200;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.card .input-container .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background: white; /* Color de Linea primero  */
  width: 100%;
  height: 1px;
}
.card .input-container .bar:before, .card .input-container .bar:after {
  content: '';
  position: absolute;
  background: #d9534f; /* Color de linea cuando escribo  */
  width: 0;
  height: 2px;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.card .input-container .bar:before {
  left: 50%;
}
.card .input-container .bar:after {
  right: 50%;
}