login-screen.less

body {
    min-height: 60em;
}

.rcue-login-register {
    background-color: #1D2226;
    background-image: url("img/login-screen-background.jpg");
    background-position: top left;
    background-size: auto;
    background-repeat: no-repeat;
    color: #fff;
    
    h1 a {
        position: absolute;
        top: 5em;
        right: 6.4em;
    }
    
    .content {
        position: absolute;
        bottom: 15%;
        width: 100%;
        min-width: 76em;
    }

    h2 {
        padding-left: 4.34782608695652em; /* 100px */
        font-family: "Overpass", sans-serif;
        font-size: 2.3em;
        font-weight: 100;
        text-transform: uppercase;
        letter-spacing: 0.005em;
        
        strong {
            font-weight: bold;        
        }
    }
    
    .background-area {
        border-top: 0.1em rgba(255, 255, 255, 0.05) solid;
        border-bottom: 0.1em rgba(255, 255, 255, 0.05) solid;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 3em 0 3em 10em;
        margin-top: 2.7em;
        width: 100%;
        min-width: 120em;
        
        section {
            float: left;
            padding: 1.5em 4.5em 1.5em 4.6em;
            width: auto;
            position: relative;
            
            h3 {
                display: none;
            }
            
            &:first-child {
                padding-right: 4.5em;
            }

        }  

    }
    
    .form-area {
        background-image: url(img/login-register-separator.svg);
        background-repeat: no-repeat;
        background-position: 40.2em center;
    }
    
    .form-area.social {
        background-image: url(img/login-register-social-separators.svg);
        background-position: 39.6em center;
    }
    
    
    /* Login area */
    
    section.app-form {
        padding-left: 0;
    }
    
    form > div {
        margin-bottom: 1em;
    }
    
    label,
    .social-login > p {
        display: inline-block;
        font-size: 1.4em;
        font-weight: 400;
    }
    
    label {
        width: 6.07142857142857em; /* 85px */
    }
    
    label.two-lines {
        float: left;
        margin-top: -0.28571428571429em; /* -4px */
        line-height: 1.1em;
    }

    input[type="text"],
    input[type="password"] {
        width: 24.7272727272727em; /* 272px */
    }
    
    form > div.aside-btn {
        float: left;
        font-size: 1.1em;
        margin-left: 7.72727272727273em; /* 85px */
        margin-top: 0.90909090909091em; /* 10px */
        margin-bottom: 0;
        
        label {
            font-size: 1em;
            width: auto;
        }
        
        input[type="checkbox"] {
            margin-bottom: 0.54545454545455em; /* 6px */
        }

    }
    
    form > input[type="button"] {
        float: right;
        margin-top: 0.76923076923077em; /* 10px */
    }
    
    p.subtitle {
        font-size: 1.1em;
        color: #999;
        position: absolute;
        right: 4.09090909090909em;
        top: -0.636363636363636em;
    }
    
    
    /* Social login area */

    section.social-login {
        
        > span {
            display: none;
        }
        
        > p {
            float: left;
            margin-top: 0.28571428571429em; /* 14px */
            width: 6.78571428571429em; /* 95px */
        }
        
        > ul {
            float: left;
        }
        
        li {
            margin-bottom: 2em;
            
            &:last-child {
                margin-bottom: 0;
            }

        }

    }
    
    /* Info area */

    section.info-area {
        
        padding-right: 0;
        
        p,
        li {
            font-size: 1.4em;
            margin-bottom: 1.64285714285714em; /* 23px */
        }
            
        li {
            color: #999;
            margin-bottom: 1em;
        }
        
        li:last-child {
            margin-bottom: 0;
        }
    
    }
    
}

@media screen and (min-width: 1280px) {
    .rcue-login-register {
      background-size: 100% auto;
    }
}


/* Social buttons */

.zocial,
a.zocial {
    padding: 0;
    line-height: 2.3em;
    height: 2.3em;
    width: 131px;
    border-radius: 2px;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
        
    .text {
        font-size: 1.2em;
        line-height: 1.25em;
        text-align: center;
        display: block;
        font-family: "Open Sans", sans-serif;
        font-weight: normal;
        border-left: 1px solid rgba(0, 0, 0, 0.15);
        margin-left: 3em; /* 36 px */
        margin-top: 0.25em; /* 3px */
    }
    
    &:hover,
    &:active,
    &:focus {
        text-decoration: none;
        background-image: none;
    }
    
    &:hover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    }
    
    &:before {
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
        width: 3em; /* 36px */
    }
}

.zocial.facebook:before {
    width: 2.66666666666667em; /* 32px */    
}


/* Register page */

.rcue-login-register.register {
    
    label {
        width: 7.5em; /* 105px */
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        width: 22.9090909090909em; /* 252px */
    }
    
    form > div.aside-btn {
        margin-left: 9.54545454545454em; /* 105px */
        width: 12.5454545454546em; /* 138px */
        
        p {
            line-height: 1.3em;
        }
        
    }
    
}


/* Customer login */

.rcue-login-register.customer {
    background-image: url("img/customer-login-screen-bg2.jpg");
    
    h2 {
        display: inline-block;
    }
    
    p.powered {
        display: inline-block;
        font-size: 1.3em;
        margin-left: 1.2em;
    }
    
    
}