@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  
  .push{
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
    
  .push:hover {
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.04) !important;
  }
  
  
  .size__icon{
    width: 180px;
    height: 110px;
  }
  
  .bg__grey{
    background-color: #403d3d;
  }
  
  .nav__responsive{
    margin: 20px;
  }
  
  .nav__button{
    margin: 16px;
  }
  /* Fin Pantalla Login */
  
  /* Incio Pantalla welcome */
  .link__nav{
    margin-right: 10px;
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
   color: #f8f8f8;
  }
  
  .link__nav:hover {
    outline: none;
    text-decoration: none;
    text-shadow: 5px 5px 2px rgba(237, 237, 237, 0.152);
    color: rgb(193, 193, 193);
    letter-spacing: 1px;
  }
  

  .with_basic{
    width: 340px!important;
  }
  
    @media screen and (max-width:600px) {
    .nav__responsive{
      margin: 55px;
    }
      .with_basic{
        width: 210px!important;
      }
  }
  
/* form login */
  body{
    margin:0;
    color:#c4c4c4;
    
    background-image: url(../Images/portada2.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /* background:#1f1f1fd7; */
    font:600 16px/18px 'Open Sans',sans-serif;
    font-family: "Poppins", sans-serif!important;
    }

    *,:after,:before{box-sizing:border-box}
    .clearfix:after,.clearfix:before{content:'';display:table}
    .clearfix:after{clear:both;display:block}
    a{color:inherit;text-decoration:none;font-family: "Poppins", sans-serif!important;}
    
    .login-wrap{
      width:100%;
      margin:auto;
      max-width:525px;
      height: 100vh;
      min-height:670px;
      position:relative;
      background:#1f1f1fd7;
      /* background-image: url(../Images/portada2.png);
      background-repeat: no-repeat;
      background-attachment: fixed; */
      box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
    }
    .login-html{
      width:100%;
      height:100%;
      position:absolute;
      padding:50px 70px 50px 70px;
      /* background:rgba(58, 58, 58, 0.9); */
    }
    .login-html .sign-in-htm,
    .login-html .sign-up-htm{
      top:0;
      left:0;
      right:0;
      bottom:0;
      position:absolute;
      transform:rotateY(180deg);
      backface-visibility:hidden;
      transition:all .4s linear;
    }
    .login-html .sign-in,
    .login-html .sign-up,
    .login-form .group .check{
      display:none;
    }
    .login-html .tab,
    .login-form .group .label,
    .login-form .group .button{
      text-transform:uppercase;
    }
    .login-html .tab{
      font-size:22px;
      margin-right:15px;
      padding-bottom:5px;
      margin:0 15px 10px 0;
      display:inline-block;
      border-bottom:2px solid transparent;
    }
    .login-html .sign-in:checked + .tab,
    .login-html .sign-up:checked + .tab{
      color:#fff;
      border-color:#ee6211;
    }
    .login-form{
      min-height:345px;
      position:relative;
      perspective:1000px;
      transform-style:preserve-3d;
    }
    .login-form .group{
      margin-bottom:15px;
    }
    .login-form .group .label,
    .login-form .group .input,
    .login-form .group .button{
      
      color:#fff;
      display:block;
    }
    .login-form .group .input,
    .login-form .group .button{
      border:none;
      padding:15px 20px;
      border-radius:25px;
      background:rgba(255,255,255,.1);
    }
    .login-form .group input[data-type="password"]{
      text-security:circle;
      -webkit-text-security:circle;
    }
    .login-form .group .label{
      color:#aaa;
      font-size:12px;
    }
    .login-form .group .button{
      background:#ee6211;
    }
    .login-form .group label .icon{
      width:15px;
      height:15px;
      border-radius:2px;
      position:relative;
      display:inline-block;
      background:rgba(255,255,255,.1);
    }
    .login-form .group label .icon:before,
    .login-form .group label .icon:after{
      content:'';
      width:10px;
      height:2px;
      background:#fff;
      position:absolute;
      transition:all .2s ease-in-out 0s;
    }
    .login-form .group label .icon:before{
      left:3px;
      width:5px;
      bottom:6px;
      transform:scale(0) rotate(0);
    }
    .login-form .group label .icon:after{
      top:6px;
      right:0;
      transform:scale(0) rotate(0);
    }
    .login-form .group .check:checked + label{
      color:#fff;
    }
    .login-form .group .check:checked + label .icon{
      background:#ee6211;
    }
    .login-form .group .check:checked + label .icon:before{
      transform:scale(1) rotate(45deg);
    }
    .login-form .group .check:checked + label .icon:after{
      transform:scale(1) rotate(-45deg);
    }
    .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
      transform:rotate(0);
    }
    .login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
      transform:rotate(0);
    }
    
    .hr{
      height:2px;
      margin:60px 0 50px 0;
      background:rgba(255,255,255,.2);
    }
    .foot-lnk{
      text-align:center;
    }
    
    input:focus{
      outline: none;
    }