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


/*
*  @author ( Francisco francisco@nicesoft.cl )  
*/

/********************[fuentes]************************/
@font-face {
    font-family: 'colaborate-thinregular';
    src: url('../fonts/colabthi-webfont.eot');
    src: url('../fonts/colabthi-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/colabthi-webfont.woff') format('woff'),
        url('../fonts/colabthi-webfont.ttf') format('truetype'),
        url('../fonts/colabthi-webfont.svg#colaborate-thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'colaborate-regularregular';
    src: url('../fonts/colabreg-webfont.eot');
    src: url('../fonts/colabreg-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/colabreg-webfont.woff') format('woff'),
        url('../fonts/colabreg-webfont.ttf') format('truetype'),
        url('../fonts/colabreg-webfont.svg#colaborate-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

/******************[GENERAL LOGIN]**************************************************/
html {
  background-image:url(../images/background_login.jpg);
  background-position: center;
  
}
  body{
    
    font-family: colaborate-thinregular;
    color:#FFF;
    font-size:16px;   
   /*
    background: -webkit-linear-gradient(90deg, #e74d6b 10%, #3f63e4 90%);
  background:    -moz-linear-gradient(90deg, #e74d6b 10%, #3f63e4 90%);
  background:     -ms-linear-gradient(90deg, #e74d6b 10%,#3f63e4 90%);
  background:      -o-linear-gradient(90deg, #e74d6b 10%, #3f63e4 90%);
  background:         linear-gradient(90deg, #e74d6b 10%, #3f63e4 90%);
  */

 
  
  }
  
  
  a{
    text-decoration:none;
    color:#363333;
  }
  a:hover{
    color:#911713;
  }
  .avi{
    /*background:url(http://josh-ruther4d.com/wp-content/uploads/2013/04/login.png);
    background-repeat:no-repeat;*/
    width: 62px;
    height: 62px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:40px;
  }
  .avi img{
    width: 60px;
  }
  .avi:hover{
    /*
    -webkit-filter: brightness(102%);
    position:relative;
    bottom:2px;*/
  }
  .form{

    
    width:420px;
    height:320px;
    /*background-color:rgba(42, 60, 87, 0.4);
     background-color:rgba(255, 252, 252, 0.4);*/
     background-color:rgba(253, 253, 253, 0.2);
  padding:25px;
  margin-left:auto;
  margin-right:auto;
    margin-top:150px;
    /*border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
   /* box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2),
      0 1px 1px rgba(255, 255, 255, 0.2);*/
    -webkit-transition: box-shadow 0.5s ease;
    -moz-transition: box-shadow 0.5s ease;
    -o-transition: box-shadow 0.5s ease;
    -ms-transition: box-shadow 0.5s ease;
    transition: box-shadow 0.5s ease;

    
    background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  
  text-align: center;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  }
  form{
    width:420px;
    margin-left:auto;
    margin-right:auto;

  
  
  }
  .recovery{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  input{
    width:320px;
    height:35px;
    margin-top:13px;
    -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*
  background: #092756;
    background: -moz-radial-gradient(
        0% 100%,
        ellipse cover,
        rgba(104, 128, 138, 0.4) 10%,
        rgba(138, 114, 76, 0) 40%
      ),
      -moz-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4)
            100%),
      -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(
        0% 100%,
        ellipse cover,
        rgba(104, 128, 138, 0.4) 10%,
        rgba(138, 114, 76, 0) 40%
      ),
      -webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(
              42,
              60,
              87,
              0.4
            )
            100%),
      -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -o-radial-gradient(
        0% 100%,
        ellipse cover,
        rgba(104, 128, 138, 0.4) 10%,
        rgba(138, 114, 76, 0) 40%
      ),
      -o-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4)
            100%),
      -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -ms-radial-gradient(
        0% 100%,
        ellipse cover,
        rgba(104, 128, 138, 0.4) 10%,
        rgba(138, 114, 76, 0) 40%
      ),
      -ms-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4)
            100%),
      -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(
        0% 100%,
        ellipse cover,
        rgba(104, 128, 138, 0.4) 10%,
        rgba(138, 114, 76, 0) 40%
      ),
      linear-gradient(
        to bottom,
        rgba(57, 173, 219, 0.25) 0%,
        rgba(42, 60, 87, 0.4) 100%
      ),
      linear-gradient(135deg, #670d10 0%, #092756 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
  */
    font-size: 13px;
    color: #fff;
    
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
   /* box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2),
      0 1px 1px rgba(255, 255, 255, 0.2);*/
    -webkit-transition: box-shadow 0.5s ease;
    -moz-transition: box-shadow 0.5s ease;
    -o-transition: box-shadow 0.5s ease;
    -ms-transition: box-shadow 0.5s ease;
    transition: box-shadow 0.5s ease;
  /*
    background-color:rgba(42, 60, 87, 0.4);
    */
    background-color: rgb(248, 249, 250, 0.4);
    display:block;
    margin-left:auto;
    margin-right:auto;

    
  }
  input:focus{
    color: #FFF;
  }
  input[type=submit]{
     
    height: 35px;
    width:322px;
    text-align:center;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:22px;
    background-color: rgba(0, 0, 0, 0.05);
    background: #262739;/*#092756;*/
    background-color: gray;
      font-size: 13px;
    color: #000;
    /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);*/
    /*border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2),
      0 1px 1px rgba(255, 255, 255, 0.2);
    -webkit-transition: box-shadow 0.5s ease;
    -moz-transition: box-shadow 0.5s ease;
    -o-transition: box-shadow 0.5s ease;
    -ms-transition: box-shadow 0.5s ease;
    transition: box-shadow 0.5s ease;
    /*background-color:#1F3373;	
    color:#fff;
    border: 1px solid #182242;
    border-bottom: 6px solid #182242;
  height: 40px;*/

  
  color: #fff;
  background-color: #0d0e14;

  }
  input[type=submit]:active{
    z-index: 2;
    margin-top: 26px;
    margin-left:auto;
    margin-right:auto;
    color: #FFF;
    background: transparent;
    border-color: #ccc;
    
    border-width: 1px 0;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4);
  }
  input[type=submit]:hover{
    background-color: #FFF;
    
    color: #000;
   
  }
  .recovery{
    font-size: 16px;
    margin-top:30px;
    color: #fff;
  }
  .recovery a{
    margin-top:30px;
    color: #fff;
  }
  .form:before, .form:after{
    content: " ";
    z-index:-1;
    height: 300px;
    background: transparent;
    position: absolute;
    width: 310px;
    margin-top:150px;
    padding:25px;
  }
  .form:before{
    margin-left:50%;
    top:5px;
    left:-145px;
    transform: rotate(98deg);
    -webkit-transform:rotate(88deg);
  }
  .form:after{
     margin-right:50%;
    top:5px;
    right:-145px;
    transform: rotate(95deg);
    -webkit-transform:rotate(95deg);;
  }
  ::placeholder { color: rgb(204, 204, 235);
  color: #9F9FA3; }

  .pie {
    font-family: colaborate-regularregular;
    font-size: 14px;
     color:#FFF;
     text-align: center;
     width: 100%;
      height: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #F2F2F2;
      padding-top: 8px;
      opacity: 0.7;
      clear: both;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      
      text-align: center;
      line-height: 1;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  }
  @media screen and (max-width: 479px) {
  /* Aquí van los estilos para smartphones */
  .pie {
     display: none;
  }
  }

  .mensaje {
    /*mensaje del scrip*/
    padding-top: 20px;
    border: none;
    color: #C12C27;
    font-family: colaborate-regularregular;
    text-align: center;
    font-size: 16px;
}