MINI MINI MANI MO
@charset "utf-8";
@import url//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
div.main{
background-image:url('../../../images/section-bg.jpg ') ;
height:calc(100vh);
width:100%;
}
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
* {
box-sizing: border-box;
margin:0px auto;
&:before,
&:after {
box-sizing: border-box;
}
}
body {
background-image:url('../../../images/section-bg.jpg ') ;
color: #606468;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0 auto; background-size: cover; background-width:100%;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #00baf2;
text-decoration: none;
}
input {
border: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
padding: 0;
-webkit-appearance: none;
}
img {
display: block;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
p {
line-height: 1.5em;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
.container {
left: 50%;
position: fixed;
top: 40%;
transform: translate(-50%, -50%);
}
/* ---------- LOGIN ---------- */
#login form{
width: 250px;
}
#login, .logo{
display:inline-block;
width:40%;
}
#login{
padding: 0px 28%;
}
.logo{
color:#fff;
font-size:50px;
line-height: 125px;
}
#login form span.fa {
background-color: #fff;
border-radius: 3px 0px 0px 3px;
color: #231F20;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
#login form input {
height: 50px;
}
fieldset{
padding:0;
border:0;
margin: 0;
}
#login form input[type="text"], input[type="password"] {
background-color: #fff;
border-radius: 0px 3px 3px 0px;
color: #aaa;
font-size:16px;
margin-bottom: 1em;
padding: 0 16px;
width: 200px;
}
#login form input[type="submit"] {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #00baf2;
color: #fff;
font-weight: bold;
/* margin-bottom: 2em; */
text-transform: uppercase;
padding: 5px 5px;
width: 250px;
height: 45px;
}
#login form input[type="submit"]:hover {
background-color: #f58220;
}
#login > p {
text-align: center;
}
#login > p span {
padding-left: 5px;
}
.middle {
display: flex;
width: 600px;
}
OHA YOOOO