@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Roboto);

/* zocial */
[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


h2 {
    color:rgba(255,255,255,.8);
    margin-left:12px;
}

body {
    background: #272125;
    font-family: 'Roboto', sans-serif;

}

form {
    position:relative;
    margin: 50px auto;
    width: 380px;
    height: auto;
}

input:not([type="checkbox"]) {
    padding: 16px;
    border-radius:7px;
    border:0px;
    background: rgba(255,255,255,.2);
    display: block;
    margin: 15px;
    width: 300px;
    color:white;
    font-size:18px;
    height: 54px;
}

input:focus {
    outline-color: rgba(0,0,0,0);
    background: rgba(255,255,255,.95);
    color: #e74c3c;
}

button {
    float:right;
    height: 121px;
    width: 50px;
    border: 0px;
    background: #e74c3c;
    border-radius:7px;
    padding: 10px;
    color:white;
    font-size:22px;
}

.inputUserIcon {
    position:absolute;
    top:68px;
    right: 80px;
    color:white;
}

.inputPassIcon {
    position:absolute;
    top:136px;
    right: 80px;
    color:white;
}

input::-webkit-input-placeholder {
    color: white;
}

input:focus::-webkit-input-placeholder {
    color: #e74c3c;
}

.remember-me {
    color: white;
    margin: 15px;
    font-size: 1.2em;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"]+label span { /* This is a style on the span. */
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url("../../img/check_radio_sheet_orange.png") left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url("../../img/check_radio_sheet_orange.png") -19px top no-repeat;
}