.login-page {

.card-login {
    border-radius: $border-radius-lg;
    padding-bottom: $padding-base-horizontal;

    .card-header {
      padding: 0 0 100px;
      overflow: hidden;
      img{
        position: absolute;
      }
      .card-title{
        position: relative;
        font-size: 5em;
        font-weight: 900;
        color: $black;
        text-transform: lowercase;
        margin-left: -5px;
        z-index: 1;
        &.pro{
          text-transform: capitalize;
        }
      }
      .card-title-span{
        position: relative;
        display: flex;
        justify-content: flex-end;
        width: 60%;
        align-items: flex-start;
      }
    }
    .btn-wd{
        min-width: 180px;
    }

    .logo-container{
        width: 65px;
        margin: 0 auto;
        margin-bottom: 55px;

        img{
            width: 100%;
        }
    }

    .input-group:last-child{
        margin-bottom: 40px;
    }

    &.card-plain{
        @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);

        .input-group-addon,
        .form-group.no-border .input-group-addon,
        .input-group.no-border .input-group-addon{
            color: $opacity-8;
        }
    }

    &.card-white{

      background: $white;

      .card-header{
        .card-title{
          color: $white;
        }
      }

      @include form-control-placeholder(rgba($black,0.4), 1);
        .has-danger{
          .form-control, .input-group-prepend .input-group-text{
            border-color: $danger-states;
          }
        }

        .input-group-prepend .input-group-text{
          border-color: rgba($black-states,0.2);
          color: $black-states;
        }

        .form-control{
          color: $black;
          border-color: rgba($black-states,0.2);
          &:focus{
            border-color: $primary;
          }
        }

      .form-group.no-border,
      .input-group.no-border{
          .form-control,
          .form-control + .input-group-prepend .input-group-text,
          .form-control + .input-group-append .input-group-text,
          .input-group-prepend .input-group-text,
          .input-group-append .input-group-text{
              background-color: $opacity-gray-3;
              &:focus,
              &:active,
              &:active{
                  background-color: $opacity-gray-5;
              }
          }

          .form-control{
              &:focus{
                  & + .input-group-prepend .input-group-text,
                  & + .input-group-append .input-group-text{

                      background-color: $transparent-bg;
                  }
              }
          }

      }

      .input-group[disabled]{
          .input-group-prepend .input-group-text,
          .input-group-append .input-group-text{
              background-color: $black;
          }
      }

      .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
        background: $light-gray;
        border-color: rgba($black-states,0.3);
      }

      .input-group-focus{
          .input-group-prepend .input-group-text,
          .input-group-append .input-group-text,
          .form-control{
            background-color: $white;
            border-color: $primary;
          }

          &.no-border{
              .input-group-prepend .input-group-text,
              .input-group-append .input-group-text{

                  background-color: $opacity-gray-5;
              }
          }
      }
      .input-group-prepend .input-group-text {
          border-right: none;
      }

      .input-group-append .input-group-text {
          border-left: none;
      }

      .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
        border-color: $danger-states;
      }

      .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
        border-color: darken($success, 10%);
      }

    }
}

.link{
    font-size: 10px;
    text-decoration: none;
}

.card-black{
  .link{
    color: $white;
  }
}

}

.full-page{

& > .content,
& > .footer{
    position: relative;
    z-index: 4;
}

& > .content{
    padding-bottom: 150px;
    padding-top: 150px;
    @include media-breakpoint-down(xs){
    &.signup-pro-fullpage{
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }
}

.footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-left: 48px;
    padding-right: 48px;
    @include media-breakpoint-down(xs){
    &.signup-pro-footer{
        position: inherit;
      }
    &.signup-part-footer{
        position: inherit;
        padding-top: 0px;
      }
    }

    .container{
        color: $white;
    }
}

.full-page-background{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center center;
}

&.pricing-page{
    .description{
        margin-bottom: 65px;
        color: rgba($white,0.7);
    }
}

&.register-page{
    .info-horizontal{
        padding: 0px 0px 20px;
    }

    .info-horizontal{
        text-align: left !important;

        .icon{
            margin-top: 0;

            >i{
                font-size: 2em;
            }

            &.icon-circle{
                width: 65px;
                height: 65px;
                max-width: 65px;
                margin-top: 8px;

                i{
                    display: table;
                    margin: 0 auto;
                    line-height: 3.5;
                    font-size: 1.9em;
                }
            }
        }
        .description{
            overflow: hidden;
            .info-title{
              margin-bottom: 20px;
            }
        }

    }
}

&.pricing-page, &.login-page, &.lock-page, &.register-page {
  min-height: 100vh;
  background: radial-gradient($background-black, $background-states-black);
}

}

@include media-breakpoint-down(sm){

.landing-page .section-story-overview .image-container:nth-child(2) {
  margin-left: 0;
  margin-bottom: 30px;
}

.login-page .card-login .card-header img {
  width: 70%;
  position: absolute !important;
  margin-left: -33px !important;
  margin-top: -212px !important;
  border-radius: 20% !important;
  width: 350px !important;
}

.page-header{
  flex-direction: column;
}

}

@include media-breakpoint-down(xs){

.register-page .full-page >.content {
  padding-top: 50px;
}

.page-header{
  .container h6.category-absolute{
      width: 90%;
  }
}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

.pricing-page,
.register-page,
.login-page,
.lock-page {
  .navbar .navbar-toggle .navbar-toggler{
    display: none;
  }
}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

.register-page .full-page .content {
  .card-register {
    margin-top: 3rem!important;
  }
}

}

@include media-breakpoint-down(md){

.lock-page,
.login-page,
.pricing-page,
.register-page {
  .navbar {
    .navbar-wrapper .navbar-toggle {
      display: none !important;
    }
  }
}

}