.regis {
    position: relative;
    border-radius: 5px;
    background-color: #f5f5f5;
    height: fit-content;
    width: 80%;
  }
  
  .logsign {
    padding: 16px;
  }
    .tabform .logsign p{
    margin-bottom: 0;
  }
    .tabform .writebox input[type=text], .tabform .writebox input[type=password] {
      width: 48%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #cccccc;
    }
    .tabform .writebox .personal {
      float: right;
      width: 50%;
      margin: auto;
      margin-top: -33px;
    }
      .tabform .writebox .personal input[type=text] {
        width: 100%;
      }

    .tabform button {
      background-color:#00304D;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 48%;
    }
    .tabform .cancelX {
      position: absolute;
      right: 25px;
      top: 10px;
      color: black;
      font-size: 30px;
      font-weight: bold;
      text-align: center;
    }
      .cancelX:hover, .cancelX:focus {
        color: red;
        cursor: pointer;
      }
      span.psw {
      padding-top: 16px;
    }
    .modal {
      justify-content: center;
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: black;
      background-color: hsla(0, 0%, 0%, 0.4);
      padding-top: 60px;
    }
    .tabform .login, .tabform .signup {background-color: #f5f5f5;}

     .popup {
      -webkit-animation: animzoom 0.6s;
      animation: animzoom 0.6s
    }

.sociallog {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none;
}
    input .sociallog:hover,
    .sociallog:hover {
    opacity: 1;
    }
        .fb {
        background-color: #3B5998;
        color: white;
        }
        .twitter {
        background-color: black;
        color: white;
        }
        .google {
        background-color: red;
        color: white;
        }

.socialbutton {
  float: right;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 40px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.verti-line {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    border: 2px solid #dddddd;
    height: 290px;
    }

.hide-phone {
  display: none;
}

@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelX {
       width: 100%;
    }
  }

@media screen and (max-width: 650px) {
  .collumn {
    width: 100%;
    margin-top: 0;
  }
  .verti {
    display: none;
  }

  .hide-phone {
    display: block;
    text-align: center;
  }
}