@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900');
   :root{
  --blue:#1616a3;
  --teal:#07ddd2;
}

      body, h1,h2,h3,h4,h5,h6,p, div, ul {font-family: 'Source Sans Pro', sans-serif;}
      .overflow-hiddden {overflow: hidden;}
      .login-new {background: url('../img/login/login-dashboard2.jpg') 0 0 no-repeat; background-size: 100%;  background-attachment: fixed;  }
      .login-new .card {box-shadow: none ;margin: 0px 80px; border:0; width: 100%}
      .login-new .card img{width: 250px;  margin: 0px 101px 10px 85px}
      .login-new .card .form-section {font-size:30px; font-weight: 700; color: #222; position: relative; border:0; margin-bottom: 60px }
      .login-new .card .form-section:after {background: rgba(7,52,200,1);
      background: -moz-linear-gradient(left, rgba(7,52,200,1) 0%, rgba(4,219,198,1) 100%);
      background: -webkit-gradient(left top, right top, color-stop(0%, rgba(7,52,200,1)), color-stop(100%, rgba(4,219,198,1)));
      background: -webkit-linear-gradient(left,  rgba(4,219,198,1) 0%, rgba(7,52,200,1) 100%);
      background: -o-linear-gradient(left,  rgba(4,219,198,1) 0%, rgba(7,52,200,1) 100%);
      background: -ms-linear-gradient(left,  rgba(4,219,198,1) 0%, rgba(7,52,200,1) 100%);
      background: linear-gradient(to right, rgba(4,219,198,1) 0%, rgba(7,52,200,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0734c8', endColorstr='#04dbc6', GradientType=1 ); content: ""; position: absolute; left: 0; width: 65px; height: 5px; bottom: -12px; }
      .login-new .form-group {margin-bottom: 30px}
      .login-new .form-control {border:0; border-bottom: solid 1px #ccc; padding: 0 0 15px; font-size: 16px; color: #333; outline: none; box-shadow: none; border-radius: 0; }
       
      .login-new .form-control::placeholder{ font-size:22px; color: #333; font-weight: 500;letter-spacing:.5px}
      .login-new  a.btn{padding: 0; font-size: 18px; color: #666; display: block; text-align: left; margin-top: -10px; outline: none; box-shadow: none;}
      .login-new  .btn-raised i {margin-left: 10px; color: #fff!important; }
       .login-new  .btn-raised:hover i {animation: slide2 .8s ease-in-out infinite;}
       @keyframes slide2 {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }

        50% {
          transform: translate(5px, 1px) rotate(0deg);
        }
      }

      .login-new  a.btn:hover {color:var(--blue);}
      .login-new .btn-raised {background:var(--blue); width: 180px; float: right; padding: 10px; font-size: 20px; font-weight: 600; border:0; border-radius: 30px; margin-top: 10px; }
      .login-new .btn-raised:hover{background:#04dbc6 }
      .login-new ul{list-style: none; margin-left: -40px; color: #ff0000;margin-top: 7px;}
      .login-new ul li {line-height: 1rem}
      .login-new .card-footer {border:0; margin-top: 10px}

      @media (max-width: 768px){
        /*login*/
        .login-new {background-size: cover;}
        .login-new .card{margin: 0; padding: 20px 0}
        .login-new .card img { margin: 0 auto 30px; max-width: 180px}
        .login-new .col-md-7 {display: none;}
        .login-new .card .form-section {font-size: 24px; margin-bottom: 50px}
        .login-new .card .form-section:after {height: 3px; bottom: -6px}
        .login-new .form-control  {  margin:  0 0 10px; padding:  0 0 10px}
        .login-new .form-control::placeholder {font-size: 18px}
        .login-new a.btn {font-size: 16px}
        .login-new .btn-raised {width: 150px; font-size: 18px; padding: 6px 10px 7px; margin-top: 30px}
      }