/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}

/* text align right */
.txt-lt {
    text-align: left;
}

/* text align left */
.txt-center {
    text-align: center;
}

/* text align center */
.float-rt {
    float: right;
}

/* float right */
.float-lt {
    float: left;
}

/* float left */
.clear {
    clear: both;
}

/* clear float */
.pos-relative {
    position: relative;
}

/* Position Relative */
.pos-absolute {
    position: absolute;
}

/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
    display: block;
}

/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}

/* horizontal menu */
img {
    max-width: 100%;
}

/*end reset*/


/* BODY BACKGROUND */
body {
    font-family: 'PT Sans Narrow', sans-serif;
    background: #F6F6FF;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
}

/* IMAGE WORKING GIRL */
.working-girl {
    position: absolute;
    z-index: 3;
    bottom: 3vw;
    right: 3vw;
    width: 25vw;
    height: auto
}


/* PARTIE GAUCHE : FORMULATIRE DE LOGIN */
::-webkit-input-placeholder {
    color: #555 !important;
    font-size: 1em !important;
}

.login {
    background-color: #000122;
    height: 100vh;
    width: 50vw;
}

.content-login {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;
}

.logo-board {
    margin: 0 auto 70px auto;
    width: 30%;
}

.login h1 {
    width: 100%;
    font-size: 1.7em;
    color: white;
    font-family: 'Roboto';
    font-weight: bold;
    margin-bottom: 5px;
}

.login h2 {
    width: 100%;
    font-size: 0.9em;
    color: white;
    font-family: 'Roboto';
    margin-bottom: 30px;
}

.login-bottom {
    width: 100%;
    padding: 0;
}

.legend-login {
    color: white;
    font-size: 0.9em;
}

.login-bottom input[type="text"], .login-bottom input[type="password"] {
    font-size: 0.8em;
    padding: 0.8em;
    border: none;
    outline: none;
    width: 97.5%;
    border-radius: 4px;
    background: #f4f4f4;
    font-family: 'PT Sans Narrow', sans-serif;
    display: block;
    margin: 5px 0 20px 0;
}

html body#login div.main div.login div.login-bottom form button {
    font-size: 1em;
    padding: 0.5em;
    border: none;
    outline: none;
    height: 40px;
    width: 100%;
    border-radius: 4px;
    background: #49ceea;
    color: #fff;
    cursor: pointer;
    font-family: 'PT Sans Narrow', sans-serif;
    display: block;
    margin-top: 10px;
    margin-bottom: 40px;
}

html body#login div.main div.login div.login-bottom form button:hover {
    background: #49ceea90;
}

.login-bottom form p.centerme {
    position: relative;
    color: #555;
    font-size: 14px;
}

.login-bottom form p.centerme a {
    position: relative;
    color: #fff;
    margin-left: 5px;
}

.information {
    width: 500px;
    margin: 10px auto 30px auto;
    background: #ff7c7c url('../images/icons/information.png') left center no-repeat;
    border-color: #a2b4ee;
    padding: 5px 0 5px 20px;
    font-size: 13px;
    color: white;
    position: relative;
    top: -15px;
    border-radius: 5px;
}

.login-bottom a {
    text-decoration: none;
}

.login-bottom a p:hover {
    color: #127DA7;
}

.btn-primary {
    background-color: #da315c;
    border-color: #da315c;
    font-family: "Roboto", sans;
    font-weight: 700;
    height: 45px;
    letter-spacing: 2px;
    margin-top: 30px;
    width: 50%;
}

.btn-primary:hover {
    background-color: #b80b38;
    border-color: #b80b38;
}


@media only screen and (max-width: 990px) {
    .login {
        width: 100vw;
        height: 100vh;
    }

    .working-girl {
        display: none;
    }
}