html {
    background-color: #01568E;
    /* background-image: url(../img/bg-azul.jpg) no-repeat fixed; */
    color: #636b6f;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    height: 100vh;
    margin: 0;
}

.fondo_sistema{
    line-height: 1;
	color: #777;
	font: 12px/20px "Open Sans", Helvetica, Arial, sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: fixed;
    background-position: center center;
    

}


#fondo_sistema{
background-color: white;

}
/* 
.fondo{
    line-height: 1;
	color: #777;
	font: 12px/20px "Open Sans", Helvetica, Arial, sans-serif;
	background: #01568E url("../img/bg-azul.jpg") no-repeat fixed;
    height: max-content;
    background-color:  #01568E 
} */

.nav-fondo{
    /* background-color: #0a85eb; */
    background: transparent url("../imagenes/bg-header.jpg") no-repeat top center;
    
    /* #top-menu li a:hover { */
        /* color: #57B3DF; */
    color: white;        
    border-bottom: 3px solid white;    
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
  

    /* border-bottom: 1px dotted #57B3DF; */
    /* } */
}

.nav-superior{
    background: transparent;
    
    color: white;        
    
}

.nav-plegable{
    /* background-color: #0a85eb; */
    background: transparent url("../imagenes/bg-header.jpg");
    /* #top-menu li a:hover { */
        /* color: #57B3DF; */
        color: white;        
    border-bottom: 3px solid white;        
    /* border-bottom: 1px dotted #57B3DF; */
    /* } */
}

.boton_1{
    text-decoration: none;
    /* padding: 40px; */
    font-family: arial;
    text-transform: uppercase;
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    /* font-weight: 800; */
    /* font-size: 25px; */
    color: black;
    background-color: transparent;
  }
  .boton_1:hover{
    color: #0e579b;
    background-color: #3484b9;
    text-decoration: none;
  }

  h1 {
    font-size: 2em;   /* 2em = 2 x 10px = 20px */
  }

.fondo-login{
    background-color: white;
}

.fondo{
    line-height: 1;
	color: #777;
	font: 12px/20px "Open Sans", Helvetica, Arial, sans-serif;
	/* background: #01568E url("../img/bg-azul.jpg") no-repeat fixed; */
    /* height: max-content;*/
    /* background-color:  #01568E ; */
    /* background-image: url("https://i.ibb.co/80hmW11/image.jpg");  */
    /* background: url("../imagenes/campus_sf.jpg") no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

 
  background-image: url("/storage/imagenes/campus_sf.jpg") ;
  background-color: rgba(0,0,0, 0.6);
  background-repeat: no-repeat;
  /* background-size: fixed; */
  background-position: center center;

  /* text-align: center;*/
  position: relative; 

}

.fondo:before {
	content:'';
	position: absolute;
        top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* background-color: rgba(0,0,0,0.4); */
}

#header-bar-middle-r span {
    font-size: 26pt;
    text-transform: uppercase;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #fff;
    position: relative;
    top: 18px;
    left: 107px;
    text-shadow: 3px 4px 4px rgba(0, 0, 0, 1);
}

#header-bar-middle-r img {
    height: 92px;
    width: auto;
    /* margin-top: 10px; */
    /* margin-left: 25%; */
} 


#titulo_login span {
    font-size: 23pt;
    text-transform: uppercase;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #fff;
    position: relative;
    top: -2px;
    left: 5px;
    /* text-shadow: 3px 4px 4px rgba(0, 0, 0, 1); */
}


#fondo_login {
    /* -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url("../imagenes/fondo_login.jpg") ;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 34px; */ 
    /* background: rgba(0,131,192,1);
    background: -moz-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,131,192,1)), color-stop(54%, rgba(0,77,147,1)), color-stop(100%, rgba(0,77,147,1)));
    background: -webkit-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
    background: -o-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
    background: -ms-linear-gradient(left, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
    background: linear-gradient(to right, rgba(0,131,192,1) 0%, rgba(0,77,147,1) 54%, rgba(0,77,147,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0083c0', endColorstr='#004d93', GradientType=1 ); */
    padding: 34px;
    background-color: #585b5c;
} 

.footer {
         /* position: absolute; */
         /* bottom: 0; */
         width: 100%;
         /* Set the fixed height of the footer here */
         /* height: 60px; */
         /* line-height: 60px;  */
         color: #9ba2a5;
         background-color: #222121;
  }

.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.content {
    text-align: center;
}

.title {
    font-size: 84px;
}

.links > a {
    color: #9ba2a5;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.m-b-md {
    margin-bottom: 30px;
}


@media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    
    .header-right {
      float: none;
    }




  }


  @media screen and (max-width: 700px) {

    #text_icons{
        display: none;
    }


  }
  
  @media screen and (max-width: 990px) {
      #header-bar-middle-r span {
           display : none;
           font-size: calc(1em + 1vw) 
      }
      #btn_toggler{
        margin-top: 48px;
      }
    
  }

  @media screen and (max-width: 800px) {
    #iconos_redes{
        display: none;
      }

      #btn_toggler{
        margin-top: 48px;
      }
  
}