@import url("https://fonts.googleapis.com/css?family=Fira+Sans");



.form-structor {

  background-color: #A5BEFF;

  border-radius: 15px;

  height: 500px;

  width: 320px;

  position: relative;

  overflow: hidden;

  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.25);



  &::after {

    content: "";

    opacity: 0.8;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-repeat: no-repeat;

    background-position: left bottom;

    background-size: 750px;

    /*background-image: url("/assets/Images/1211.svg");*/

  }



  .signin {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 65%;

    z-index: 5;

    transition: all 0.3s ease;



    &.slide-up {

      top: 5%;

      transform: translate(-50%, 0%);

      transition: all 0.3s ease;

    }



    &.slide-up .form-holder,

    &.slide-up .submit-btn {

      opacity: 0;

      visibility: hidden;

    }



    &.slide-up .form-title {

      font-size: 1em;

      cursor: pointer;

    }



    &.slide-up .form-title span {

      margin-right: 5px;

      opacity: 1;

      visibility: visible;

      transition: all 0.3s ease;

    }



    .form-title {

      color: #fff;

      font-size: 1.7em;

      text-align: center;



      span {

        color: rgba(0, 0, 0, 0.4);

        opacity: 0;

        visibility: hidden;

        transition: all 0.3s ease;

      }

    }



    .form-holder {

      border-radius: 15px;

      background-color: #fff;

      overflow: hidden;

      margin-top: 50px;

      opacity: 1;

      visibility: visible;

      transition: all 0.3s ease;



      .input {

        border: 0;

        outline: none;

        box-shadow: none;

        display: block;

        height: 30px;

        line-height: 30px;

        padding: 8px 15px;

        border-bottom: 1px solid #eee;

        width: 100%;

        font-size: 12px;



        &:last-child {

          border-bottom: 0;

        }

        &::input-placeholder {

          color: rgba(0, 0, 0, 0.4);

        }

      }

    }



    .submit-btn {

      background-color: rgba(0, 0, 0, 0.4);

      color: rgba(256, 256, 256, 0.7);

      border: 0;

      border-radius: 15px;

      display: block;

      margin: 15px auto;

      padding: 15px 45px;

      width: 100%;

      font-size: 13px;

      font-weight: bold;

      cursor: pointer;

      opacity: 1;

      visibility: visible;

      transition: all 0.3s ease;



      &:hover {

        transition: all 0.3s ease;

        background-color: rgba(0, 0, 0, 0.8);

      }

    }

  }



  .login {

    position: absolute;

    top: 20%;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #fff;

    z-index: 5;

    transition: all 0.3s ease;



    &::before {

      content: "";

      position: absolute;

      left: 50%;

      top: -20px;

      transform: translate(-50%, 0);

      background-color: #fff;

      width: 200%;

      height: 250px;

      border-radius: 50%;

      z-index: 4;

      transition: all 0.3s ease;

    }



    .center {

      position: absolute;

      top: calc(50% - 10%);

      left: 50%;

      transform: translate(-50%, -50%);

      width: 65%;

      z-index: 5;

      transition: all 0.3s ease;



      .form-title {

        color: #000;

        font-size: 1.7em;

        text-align: center;



        span {

          color: rgba(0, 0, 0, 0.4);

          opacity: 0;

          visibility: hidden;

          transition: all 0.3s ease;

        }

      }



      .form-holder {

        border-radius: 15px;

        background-color: #fff;

        border: 1px solid #eee;

        overflow: hidden;

        margin-top: 50px;

        opacity: 1;

        visibility: visible;

        transition: all 0.3s ease;



        .input {

          border: 0;

          outline: none;

          box-shadow: none;

          display: block;

          height: 30px;

          line-height: 30px;

          padding: 8px 15px;

          border-bottom: 1px solid #eee;

          width: 100%;

          font-size: 12px;



          &:last-child {

            border-bottom: 0;

          }

          &::input-placeholder {

            color: rgba(0, 0, 0, 0.4);

          }

        }

      }



      .submit-btn {

        background-color: #005A9E;

        color: rgba(256, 256, 256, 0.7);

        border: 0;

        border-radius: 15px;

        display: block;

        margin: 15px auto;

        padding: 15px 45px;

        width: 100%;

        font-size: 13px;

        font-weight: bold;

        cursor: pointer;

        opacity: 1;

        visibility: visible;

        transition: all 0.3s ease;



        &:hover {

          transition: all 0.3s ease;

          background-color: rgba(0, 0, 0, 0.8);

        }

      }

    }



    &.slide-up {

      top: 90%;

      transition: all 0.3s ease;

    }



    &.slide-up .center {

      top: 10%;

      transform: translate(-50%, 0%);

      transition: all 0.3s ease;

    }



    &.slide-up .form-holder,

    &.slide-up .submit-btn {

      opacity: 0;

      visibility: hidden;

      transition: all 0.3s ease;

    }



    &.slide-up .form-title {

      font-size: 1em;

      margin: 0;

      padding: 0;

      cursor: pointer;

      transition: all 0.3s ease;

    }



    &.slide-up .form-title span {

      margin-right: 5px;

      opacity: 1;

      visibility: visible;

      transition: all 0.3s ease;

    }

  }

}



.guest {

    font-size: 80% !important;

}