.password-container{
                width: 400px;
                position: relative;
              }.password-container input[type="password"],
              .password-container input[type="text"]{
                width: 100%;
                padding: 12px 36px 12px 12px;
                box-sizing: border-box;
              }.fa-eye{
                position: absolute;
                top: 28%;
                right: 4%;
                cursor: pointer;
                color: lightgray;
              }
            .rowPan {
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
                 width: 100%;
                 max-width: 1000px;
                 position: absolute;
                 left: 50%;
                 top: 50%;
                 transform: translate(-50%, -50%);
             }
             
             .colm-logo {
                 flex: 0 0 50%;
                 text-align: left;
             }
             
             .colm-form {
                 flex: 0 0 40%;
                 text-align: center;
             }
             
             .colm-logo img {
                 max-width: 400px;
             }
             
             .colm-logo h2 {
                 font: 26px;
                 font-weight: 400;
                 padding: 0 30px;
                 line-height: 32px;
             }
             
             .colm-form .form-container {
                 background-color: #ffffff;
                 border: none;
                 border-radius: 10px;
                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
                 margin-bottom: 30px;
                 padding: 20px;
                 max-width: 400px;
             }
             
             .colm-form .form-container input,
             .colm-form .form-container .btn-login {
                 width: 100%;
                 margin: 5px 0;
                 height: 45px;
                 vertical-align: middle;
                 font-size: 16px;
             }
             
             .colm-form .form-container input {
                 border: 1px solid #dddfe2;
                 color: #1d2129;
                 padding: 0 8px;
                 outline: none;
             }
             
             .colm-form .form-container input:focus {
                 border-color: #1877f2;
                 box-shadow: 0 0 0 2px #e7f3ff;
             }
             
             .colm-form .form-container .btn-login {
                 /* background-color: #1877f2; */
                 border: none;
                 border-radius: 6px;
                 font-size: 20px;
                 padding: 0 16px;
                 color: #ffffff;
                 font-weight: 700;
             }
             
             .colm-form .form-container a {
                 display: block;
                 color: #1877f2;
                 font-size: 14px;
                 text-decoration: none;
                 padding: 10px 0 20px;
                 border-bottom: 1px solid #dadde1;
             }
             
             .colm-form .form-container a:hover {
                 text-decoration: underline;
             }
             
             .colm-form .form-container .btn-new {
                 background-color: #42b72a;
                 border: none;
                 border-radius: 6px;
                 font-size: 17px;
                 line-height: 48px;
                 padding: 0 16px;
                 color: #ffffff;
                 font-weight: 700;
                 margin-top: 20px;
             }
             
             .colm-form p {
                 font-size: 14px;
             }
             
             .colm-form p a {
                 text-decoration: none;
                 color: #1c1e21;
                 font-weight: 600;
             }
             
             .colm-form p a:hover {
                 text-decoration: underline;
             }
             /*******/
             
             .login {
                 overflow: hidden;
                 background-color: white;
                 padding: 40px 30px 30px 30px;
                 border-radius: 10px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 width: 400px;
             }
             
             a {
                 text-decoration: none;
                 color: rgba(white, 0.6);
                 /* position: absolute; */
                 /* right: 10px; */
                 bottom: 10px;
                 font-size: 12px;
             }
             /***********************************************/
             
             @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
             h1 {
                 font-weight: bold;
                 margin: 0;
             }
             
             h2 {
                 text-align: center;
             }
             
             p {
                 font-size: 14px;
                 font-weight: 100;
                 line-height: 20px;
                 letter-spacing: 0.5px;
                 margin: 20px 0 30px;
             }
             
             span {
                 font-size: 12px;
             }
             
             a {
                 color: #333;
                 font-size: 14px;
                 text-decoration: none;
                 margin: 15px 0;
             }
             
             .btn-login {
                 /* border-radius: 20px; */
                 border: 1px solid #813807;
                 /* background-color: #1877f2; */
                 color: #FFFFFF;
                 font-size: 12px;
                 width: 100%;
                 font-weight: bold;
                 padding: 12px 45px;
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 transition: transform 80ms ease-in;
             }
             
             button:active {
                 transform: scale(0.95);
             }
             
             button:focus {
                 outline: none;
             }
             
             button.ghost {
                 background-color: transparent;
                 border-color: #FFFFFF;
             }
             
             form {
                 background-color: #FFFFFF;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-direction: column;
                 padding: 0 50px;
                 height: 65%;
                 text-align: center;
             }
             
             input {
                 background-color: #eee;
                 border: none;
                 padding: 12px 15px;
                 margin: 8px 0;
                 width: 100%;
             }
             
             .container {
                 background-color: #fff;
                 border-radius: 10px;
                 box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
                 position: relative;
                 overflow: hidden;
                 width: 70%;
                 max-width: 100%;
                 min-height: 480px;
             }
             
             .form-container {
                 /* position: absolute; */
                 top: 0;
                 height: 100%;
                 transition: all 0.6s ease-in-out;
             }
             
             .sign-in-container {
                 left: 0;
                 width: 50%;
                 z-index: 2;
             }
             
             .container.right-panel-active .sign-in-container {
                 transform: translateX(100%);
             }
             
             .sign-up-container {
                 left: 0;
                 width: 50%;
                 opacity: 0;
                 z-index: 1;
             }
             
             .container.right-panel-active .sign-up-container {
                 transform: translateX(100%);
                 opacity: 1;
                 z-index: 5;
                 animation: show 0.6s;
             }
             
             @keyframes show {
                 0%,
                 49.99% {
                     opacity: 0;
                     z-index: 1;
                 }
                 50%,
                 100% {
                     opacity: 1;
                     z-index: 5;
                 }
             }
             
             .overlay-container {
                 /* position: absolute; */
                 top: 0;
                 /* left: 100%; */
                 /* width: 50%; */
                 height: 100%;
                 overflow: hidden;
                 transition: transform 0.6s ease-in-out;
                 z-index: 100;
             }
             
             .container.right-panel-active .overlay-container {
                 transform: translateX(-100%);
             }
             
             .overlay {
                 background: #1877f2;
                 background: -webkit-linear-gradient(to right, #4b40ed, #1877f2);
                 background: linear-gradient(to right, #3d47dc, #1877f2);
                 background-repeat: no-repeat;
                 background-size: cover;
                 background-position: 0 0;
                 color: #FFFFFF;
                 position: relative;
                 left: -100%;
                 height: 100%;
                 width: 200%;
                 transform: translateX(0);
                 transition: transform 0.6s ease-in-out;
             }
             
             .container.right-panel-active .overlay {
                 transform: translateX(50%);
             }
             
             .overlay-panel {
                 position: absolute;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-direction: column;
                 padding: 0 40px;
                 text-align: center;
                 top: 0;
                 height: 100%;
                 width: 50%;
                 transform: translateX(0);
                 transition: transform 0.6s ease-in-out;
             }
             
             .overlay-left {
                 transform: translateX(-20%);
             }
             
             .container.right-panel-active .overlay-left {
                 transform: translateX(0);
             }
             
             .overlay-right {
                 right: 0;
                 transform: translateX(0);
             }
             
             .container.right-panel-active .overlay-right {
                 transform: translateX(20%);
             }
             
             .social-container {
                 margin: 20px 0;
             }
             
             .social-container a {
                 border: 1px solid #DDDDDD;
                 border-radius: 50%;
                 display: inline-flex;
                 justify-content: center;
                 align-items: center;
                 margin: 0 5px;
                 height: 40px;
                 width: 40px;
             }
             
             .conDiv {
                 margin-left: 10%;
             }
             
             @media screen and (min-width: 576px) {
                 .rowPan img {
                     margin-left: 8%;
                 }
                 .rowPan h2 {
                     margin: -87px 120px 50px 50px;
                     text-align: justify;
                 }
                 .conDiv {
                     margin-left: 50px;
                 }
             }
        
        @media screen and (min-width:321px) and (max-width:768px) {
            .h3{
               margin: -84px 11px 59px 48px;
            }
        }