html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  
  background: #003C4C;
 /* background: linear-gradient( #125fb6,  #002959);*/ 
 background: linear-gradient(0deg, #003C4C 0%, #0BB0D3 100%);


/*  background:url(../img/bg-hd.png) no-repeat center center fixed;*/
/*  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
  color: #fff;
  font-family: sans-serif;

}

/*
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}*/

  .form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
  }

  /*
   * Globals
   */
  
  /* Links */
  a,
  a:focus,
  a:hover {
    color: #fff;
  }
  /*
  .btn-primary {
    color: #fff;
    background-color: #868e96;
    border-color: #818182;
  }
  
  /* Custom default button */
  /*
  .btn-primary:active,
  .btn-primary:hover,
  .btn-primary:focus {
    color: #fff;
    background-color: #005195;
    border-color: #005195;
  }
    */
  
  /* #005195
   * Base structure
   */
  
  
  .App {
    text-align: center;
  }
   
  /* Extra markup and styles for table-esque vertical and horizontal centering */
  .site-wrapper {
    display: table;
   
    height: 100%;  /* For at least Firefox */
    width: 100%; 
    position: fixed; 
    
    /*
    -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
            box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  */
  }
  
  .site-wrapper-inner {
    display: table-cell;
    vertical-align: middle;
   
  }
  
  .cover-container {
   
    margin-right: auto;
    margin-left: auto;
    text-align: center;
   
  }
  
  @media (max-width: 360px) {
  
   .site-wrapper {
    display: table;
    width: 100%;
    height: 100%;
   
    /* For at least Firefox */
    /*min-height: 100%;*/
    
   /*
    -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
            box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  */
  }
  
  }
  
  
  /* Padding for spacing */
  .inner {
    
    padding-left: 15px;
    padding-right: 15px; 
  }
  
 /* pantalla complets */
  .inner > img {
    height: 45px; 
  }

  
  
  /*
   * Header
   */
  
  /*
   * Cover
   */
  
  .cover {
    padding: 0 1.5rem;
  }
  
  /*
  .cover .btn-lg {
    padding: .75rem 1.25rem;
    font-weight: bold;
  }
  */
  
  /*
   * Footer
   */
  
  .mastfoot {
    color: rgba(255,255,255,.5);
    padding-bottom: 15px;
    padding-top: 15px;

  }
  
  
  /*
   * Affix and center
   */
  

 


  @media (min-width: 640px) {
    /* Pull out the header and footer */
    .masthead {
      position: fixed;
      top: 0;
    }

   .mastfoot {
      position: fixed;
      bottom: 0;
    } 
    /* Start the vertical centering */
    .site-wrapper-inner {
      vertical-align: middle;
       
    }
    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container {
      width: 100%; /* 640 Must be percentage or pixels for horizontal alignment */
    }

  
  



  }
  
  
  @media (min-width: 992px) {
    .masthead,
    .mastfoot,
    .cover-container {
      width: 100%;
    }

  }
  
  #cover-center
  {
    background: #3C8DBC; 
    border: none; 
    text-align: center;
    color:#fff; 
    border-radius: 5px 5px 0 0; 
    padding-top: 10px; 
    padding-bottom: 10px; 
  }
  
  .cover-mid {
   vertical-align: middle;
  }
  
  .cover-avatar
  {

    /*width: 310px;*/ 
    margin:5px 5px 15px;
    }
  
  
  @media (max-width: 375px) {
  
    .mastfoot {
      margin-top: 30px;
    }

/*
  .cover-avatar 
  {
    width: 80%; 
    margin: 5px 5px 15px;   
  }
  */ 

  .inner > img {
    height: 30px; 
  }
  

  
  
  
  } /* 360 pc*/
  
  
  .cover-page
  {
    vertical-align: middle;  
   background-color: rgba(23, 47, 75, 0.7);
   border-radius: 9px;

   /* background-color: #383d41cc;
    border: none; 
    /* margin-top: 5%;*/ 
    color: #fff; 
    text-shadow:none;
  }
  
  .cover-form 
  {
    padding: 5%; 
  }
  
  .cover-auto 
  {
    margin-top: auto; 
    margin-bottom: auto;  
  }
  
/* alert */

  .alert {
   /* border-radius: 0;*/ 
    margin-top: 16px; 
  }


  .alert > p{
    margin-top: 0;
    margin-bottom: 0;
  }
  /*
  .alert h4 {
    font-weight: 600;
  }
  .alert .icon {
    margin-right: 10px;
  }
  */
  
  
  
  .alert .close {
    color: #fff;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  
  /*
  .alert .close:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
  
  .alert a {
    color: #fff;
    text-decoration: underline;
  }
  */
  
  .alert-success {
    color: white;
    background-color: #009c56;
    border-color: inherit;
    border-left: 1px solid white; 
  }
  
  .alert-danger,
  .alert-warning, 
  .alert-error {
    color: white;
    background-color: rgb(216, 25, 0); 
    border-color: inherit;
    border: 1px solid #fff; 
  
  }
  
  .alert-info{
    color: white;
    background-color: rgb(0, 166, 207); 
    border-color: inherit;
    border-left: 1px solid white; 
  
  }



  /*.App {
    text-align: center;
  }
  
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 80px;
  }
  
  .App-header {
    background-color: #222;
    height: 150px;
    padding: 20px;
    color: white;
  }
  
  .App-intro {
    font-size: large;
  }
  
  @keyframes App-logo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  */